I have a tab panel that allowed me to switch between two window, I'd sent my choice my controller to execute a different statement in each tabuleur, for example if I have id = proj_tab_1 it returns me to input and if id = proj_tab_2 it returns the output view, but I do not know how to pass the spreadsheet key information between the view and controller here is my code
view :
<div class="tab-content">
<div class="tab-pane fade in active" id="proj_tab_1" >
#Html.Partial("_InputFilesList", Model)
</div>
<div class="tab-pane fade" id="proj_tab_2" >
#Html.Partial("_OutputFilesList", Model)
</div>
</div>
controller :
public ActionResult GetFilesListByType(MonitorFilesModel model)
{
model.FillDDL();
model.GetFilesListByType();
ViewBag.Success = true;
//if tableur 1
return View("_InputFilesList", "~/Views/Shared/_AjaxLayout.cshtml", model);
//if tableur 2
return View("_OutputFilesList", "~/Views/Shared/_AjaxLayout.cshtml", model);
}
In my opinion, you don't need to send key to controller. The easiest way, use javascript (I use jquery but it is up to you), something like that:
<script>
$('dom_element').on('event', function(){
var rel = $(this);
var pane = rel.closest('.tab-pane');
pane.removeClass('in');
pane.removeClass('active');
pane.next('.tab-pane').addClass('in active');
});
</script>
Otherwise, you can set your partial views in form and using standard action on submit button redirect to the action you needed.
By the way, I think that you have to return partial view, but not just views.
Hope, it helps.
Related
I have a view which has a registration form. If the registration form is submitted I want to return to the same view and display a temporary Bootstrap Well and then fade it out. Check my idea out in my controller
Controller
// Insert User
[HttpPost]
public void AddUser(ResourceViewModel resourceInfo)
{
// Fetch data from ViewModel as parameters Execute Stored Procedure
db_RIRO.sp_InsertNewUser(resourceInfo.Username, resourceInfo.Password);
db_RIRO.SaveChanges()
// My Idea
if (storedProcedure succesful)
{ // display success ViewBag in view }
else
{
// display failed ViewBag in view
}
}
View
<div class="form-group">
<label class="col-sm-3 control-label lb-sm" for="textinput">Password</label>
<div class="col-sm-5">
#Html.TextBoxFor(a => a.Password, new { #class = "form-control input-sm" })
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label lb-sm" for="textinput">Username</label>
<div class="col-sm-5">
#Html.TextBoxFor(a => a.Username, new { #class = "form-control input-sm" })
</div>
</div>
How would I achieve this using ViewBag?
You haven't said whether you return to the same view or not, but in whatever view you do return to, you can print the TempData out.
Here's a basic example:
Controller:
[HttpPost]
public void AddUser(ResourceViewModel resourceInfo)
{
// Fetch data from ViewModel as parameters Execute Stored Procedure
db_RIRO.sp_InsertNewUser(resourceInfo.Username, resourceInfo.Password);
db_RIRO.SaveChanges()
// My Idea
if (storedProcedure succesful)
{
// display success tempdata in view
TempData["Message"] = "Data saved successfully";
}
else
{
// display failed tempdata in view
TempData["Message"] = "Sorry, an error has occurred";
}
//...etc
}
View (place this anywhere you like in the view):
#if (TempData["Message"] != null)
{
#Html.Raw(TempData["Message"].ToString())
}
This example just uses a simple string, but you can use a more complex data structure if required (e.g. I imagine you might want to set colour schemes / CSS classes for success / failure, for instance, or add Javascript to get things like fade effects - you can place that script within your if statement. Maybe consider creating a re-usable partial view and a "Message" object to use as the model for it which can convey all that kind thing, and you can use it throughout your application.
N.B. If you're returning to the same view, you can always just use the ViewBag instead of TempData - TempData can be useful because will persist across requests, e.g. if you redirect to another action at the end of your current action, instead of directly returning a view.
From the image i try to load two controllers, on pageload Browse controller loads with 1 and 2 data from picture, when i want to select the date,it should load the dayselect controller data in same page. How can i do this , My controllers are here
public ViewResult Browse(Int32 eventid) {
//code
return view(ef);
}
public ActionResult DaySelect(EventModel m) {
return view("_Common",k);
}
My viewModel for Browse Controller is Browse.cshtml
#model BrowseEventModel
<div class="Event_Name" id="id_name">#Model.EventName</div>
<div class="Event_loc" id="id_loc">#Model.EventLocation</div>
//In this view i have a widget which i load in partial view
<div class="yui3-g" id="bottom_container"> #{Html.RenderPartial("_Common");}
</div>
The partial view is _common.cshtml
#model BrowseEventModel
<select name="dayNo" id="dayNo">
#foreach (var s in Model.Dayselector) {
<option value = "#s.DayNo"> #s.DayDate.ToString("dd MMM yyyy")</option>
}
</select>
//View Model used for both browse and dayselect controller
#foreach(var e in Model.DisplayData){
<ul id="ul-data">#e.dataName</ul>
<div id="ul-id">#e.dataid</div>
}
When i select the date it should load data in same view page is it possible,i.e injecting view on runtime
You can use AJAX to inject view at runtime. In your case, you are depending on the onchange event of a DropDownList. A question has already been asked with the same problem as yours. Try this: using ajax with dropdownlist mvc3
All I need to do is create a simple search page that displays results in a partial view. I have a search text box and a search submit button. I followed a tutorial I found online that seems very easy and quick to implement, but I am missing something here. When I click the search button nothing happens. Any ideas on what I am doing wrong or missing would be greatly appreciated.
I include the following script files in the main layout page
#Script("jquery-1.5.1.min.js")
#Script("modernizr-1.7.min.js")
#Script("jquery-ui.min.js")
#Script("jquery.unobtrusive-ajax.js")
#Script("jquery.validate.min.js")
#Script("jquery.validate.unobtrusive.min.js")
#helper Script(string scriptName)
{
<script src="#Url.Content("~/Scripts/" + scriptName)" type="text/javascript"> </script>
}
The main search view is called AdminMenu. This is listed under a Area in my project called Admin.
The following code in my main view
#using (Ajax.BeginForm("AdminSearch", "AdminMenu", new {area = "Admin"}, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "searchResults"}))
{
<input type="text" name="q" />
<input type="submit" value="Search"/>
}
<div id="searchResults">
</div>
Code in my partial view _adminSearch
<div id="searchResults">
<div class="entitybox">
#{
var grid = new WebGrid(
Model,
defaultSort: "Name", canPage: false
);
}
#grid.GetHtml(
tableStyle: "_tableGrid",
columns: grid.Columns
(
grid.Column("Name", "Name", item => #Html.ActionLink((string)item.Name, "SelectRecord", new { controller = "Menu", agencyKey = item.Id, name = item.Name }))
)
)
</div>
</div>
Code for the Controller
public class AdminMenuController : Controller
{
public ActionResult AdminMenu()
{
return View();
}
public PartialViewResult AdminSearch(string q)
{
Records results = AgencyBusiness.GetAdminSearch(q);
return PartialView("_adminSearch", results);
}
}
When the search button is clicked nothing happens. If you put a break point on the AdminSearch method in the controller class it never gets hit.
Thanks in advance for your time.
I think the problem is that you have a div called "searchResults" in both your main view and partial view. Ajax is probably getting confused.
You need to include the MicrosoftAjax.js file when using Ajax.BeginForm.
I solved this issue. Odd thing. I used a shared view to show the current user at the top of the view using the following line.
#RenderPage("~/Views/Shared/_LoginBar.cshtml")
The main problem was that #Ajax.BeginForm function did not output any form tags to the browser.
By using the following line instead, the form tags appeared in the HTML source and the ajax function worked.
#Html.Partial("~/Views/Shared/_LoginBar.cshtml")
I am new to MVC3 and Razor.
I have an "attention banner" on the master page as a Partial View that I want to "acknowledge" with a click on a link to close the banner (without reloading the page). I believe I need to use jQuery and an Ajax call, but I just can't seem to find the right combination.
Here is part of my _Layout.cshtml:
<section id="main">
<span id="attentionBar">#{ Html.RenderPartial("_AttentionBarPartial"); }</span>
#RenderBody()
</section>
This is my Partial View (just using Session as a shortcut for now to get it to work). I'm not sure what to use as the "link" to reload the view:
#{ this.Layout = null;}
#if(! String.IsNullOrWhiteSpace(#Session["Attention"].ToString()))
{
<div class="attentionPanel">
<span class="attentionLabel">Attention</span>
#Session["Attention"].ToString()
<span class="attentionLabel">
#* WHAT DO I PUT HERE *#
#Ajax.ActionLink("X", "AcknowledgeAttentionBar", "Home", new AjaxOptions{ UpdateTargetId="attentionPanel", InsertionMode=InsertionMode.Replace })
</span>
</div>
}
Here is my Home controller. Again, I am not sure that the code is quite correct, but essentially I will clear out the condition that shows the attention banner.
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Home Controller Updated At " + DateTime.Now.ToLongDateString()
+ " " + DateTime.Now.ToLongTimeString();
return View();
}
public PartialViewResult AcknowledgeAttentionBar()
{
Session["Attention"] = String.Empty;
return PartialView("_AttentionBarPartial");
}
}
2 things:
Make sure you have included the jquery.unobtrusive-ajax.js script to your page in order for Ajax.ActionLink helper to work and send an AJAX request when the link is clicked instead of a normal redirect:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
In your AjaxOptions you have specified UpdateTargetId="attentionPanel" but there's no element in your markup with id="attentionPanel". You have a div with class="attentionPanel" but that's not the same thing. On the other hand you have wrapped your banner in a <span id="attentionBar">, so you probably meant UpdateTargetId="attentionBar".
I'm trying to create a single page form to create a 'work item'. One of the properties is a drop down for 'work item type'.
Depending on the work item type, the user may need to provide additional information in a name-value-pair style attributes grid (property sheet).
I would like to dynamically render the property sheet as soon as a work item type is selected or changed. Once the user provides all information, he would click submit to create the 'work item'.
This is what I have so far:
#using (Ajax.BeginForm("AttributeData", new AjaxOptions() { UpdateTargetId="AttributeDataCell" }))
{
<div style="float:left">
#{
Html.RenderPartial("CreateWorkItemPartialView");
}
</div>
<div id="AttributeDataCell" style="float:right">
#Html.Action("AttributeData", new {id = 1})
</div>
}
The AttributeData action in the controller simply renders the partial view:
public ActionResult AttributeData(int id = 0)
{
var attributes = _workItemDataService.ListWorkItemTypeAttributes(id);
return PartialView("EditWorkItemAttributesPartialView", attributes);
}
Now I would like to hook this up to the drop-down-list's selection event so that the partial view re-renders in the above table cell at every selection change. I would like to pass in the selected value as id.
One way is to force the form to submit itself (and thus re-render).
If that is the right approach, how do we go about it? Esp., how do we make only the property sheet to re-render?
If there is a better way to achieve the above, please indicate.
Thanks
You could subscribe to the .change() event of the dropdown and trigger an AJAX request:
$(function() {
$('#Id_Of_Your_Drop_Down').change(function() {
// This event will be triggered when the dropdown list selection changes
// We start by fetching the form element. Note that if you have
// multiple forms on the page it would be better to provide it
// an unique id in the Ajax.BeginForm helper and then use id selector:
var form = $('form');
// finally we send the AJAX request:
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
success: function(result) {
// The AJAX request succeeded and the result variable
// will contain the partial HTML returned by the action
// we inject it into the div:
$('#AttributeDataCell').html(result);
}
});
});
});