I have multiple renderactions in a MVC3 view.
I'd like to get a partial View and then the results as the parialviews get in.
(like some placeholders on the page and then the page gets filed up with the renderaction results as the partialviews poor in).
I now have several Html.RenderAction("Action", "controller"); in with different actions on the Main view returning some partial views to be rendered. How do I get them async in return instead of waiting with the render until the last one pops in?
Do I need some ajax or is this done using the AsyncController?
I always prefere to use jQuery ajax. You can simply return PartialView as a ajax action result and then in the jQuery (on the browser side) replace content of specipic part of you page with just returned PartialView.
Quick and easy and no page reload!
Take look a this:
$.ajax({
type: "POST",
data: { "supporterId": supporterId },
url: '#Url.Action("ShowDetails")',
success: function (result) {
$("#popupDetails").html(result); - here you are replaceing content of you page with partial view returned by the action
},
error: function (error) {
alert("error");
}
});
And here is the action:
public ActionResult ShowDetails(int supporterId)
{
Supporter supporter = ... //get supporter object from the database
return PartialView("Details", supporter);
}
Related
I have a View with a Form that calls a controller action Post Method to "Complete" a Package. It then needs to refresh the page its on as that contains information that will be updated, both within the view itself and also within a partial. It does use two different Controllers in different MVC Areas.
The Post works correctly and the redirect is issued, but the page is not refreshed.
I have read that instead, I should use OnSuccess within the Ajax call that calls Complete, but I thought that was for in page calls, not ones that navigate to different pages.
View Form
#using (Ajax.BeginForm("Complete", "Packages", new { Area = "Core" },
new AjaxOptions
{
HttpMethod = "POST"
}))
{
Core(Area) Packages Controller
[HttpPost]
public ActionResult Complete(int ID)
{
// Update code
// Refresh the full page
return RedirectToAction("Summary", new { Area = "Control", id = packageBuilder.CurrentPackage.ID });
}
Control (Area) Packages Controller
[HttpGet]
public ActionResult Summary(int id)
{
// Get Model
return View("Summary", model);
}
Any pointers would be warmly welcomed.
Thanks,
Chris.
The reason that your page is not refreshed after you submit the form and the redirect is not issued in the browser, is that you are submitting the request over AJAX. This is a request issued by the browser behind the scenes.
If you want to submit the form and for the page to be refreshed, I'd recommend changing your code from Ajax.BeginForm(... to Html.BeginForm(... and then it will load the page and perform the redirect as expected.
I am not quite sure how your ajax calls are structured, but if you are using the MVC Ajax helper you can just call `location.reload(); in the OnComplete method, like so:
#using (Ajax.BeginForm(new AjaxOptions{OnComplete = "javascriptfunction"}))
{
//Data and submit button
}
<script>
function javascriptfunction(){
location.reload();
}
</script>
I populated a SelectList Programmatically using the SelectList Constructor (IEnumerable, String, String)
IEnumerable<Permission> ie_SelLstContentAvailPerms;
tmpLstPermissions = FilterAssignablePermissionsByRoleMgblty(p_iRoleId,vmRolePermAdmin.lstPermissionsSource);
//test Forcing Results in to IEnumerable format for Select list Constructor
ie_SelLstContentAvailPerms = tmpLstPermissions.ToList();
vmRolePermAdmin.selLstPermissionsSource = new SelectList(ie_SelLstContentAvailPerms, "PermissionId", "Name");
And I use the DropDownList structure :
#Html.DropDownList("ddlAssignedRolePermissions", (Model.selLstCurrentRolePermissions), null, new { #id = "ddlAssignedRolePermissions", #size = "5", #onchange = "ddlAssignedRolePermissionsEvent(this)" })
My previous use of this structure has an ajax call who's success method is returning the updated model ----but its main body(Postify to AssignPermission(iUserID))is doing the work to the viewmodel based upon the item selected in the drop down list
$.ajax({
url: "~/../../User/AssignPermission",
type: "POST",
data: $.postify({ "p_permId": optionSelectedPerm.value, "p_UserId": iUserId }),
cache: false,
success: function () {
ReloadUserPermissions();
},
error: function () {
// alert("FAIL"); //TODO ?
}
});
I was attempting to replicate this structure for a new page , but instead of using the success results method of the Ajax call I've been trying to return the updated model in the main ajax work.. if the above example were structured this way there would be no success function and the controller ActionResult method would return the updated model. This isnt working . I see the data (updated) in the view while debugging but it does not up date the view ...
Do I have to use the success function of the Ajax call in order to update the view?
<script type="text/javascript">
$(document).ready(function () {
var optionSelectedPerm;
var mvcTmpData_iCurrentRoleID;
});
function SelectedRole(p_lstRole) {
debugger;
mvcTmpData_iCurrentRoleID = $("#ddlSelectedRole").val();
$.ajax({
url: "~/../../AdminRoles/AdminRolePermissions",
type: "POST",
data: $.postify({ "p_nullRoleId": mvcTmpData_iCurrentRoleID }),
cache: false,
success: function () {
AjaxReloadRolePermissions();
},
error: function () {
},
});
function AjaxReloadRolePermissions() {
//alert("Current RoleID: " + mvcTmpData_iCurrentRoleID);
var url = '#Url.Action("ReloadRolePermissions", "AdminRoles", new { p_RoleId = "zReplaceRoleId" })';
window.location.href = url.replace('zReplaceRoleId', mvcTmpData_iCurrentRoleID);
}
}
</script>
Please note that in order to accomplish the first working scenario the controller method as cited in the Ajax call "AssignPermission" is an ActionResult of Type EmptyResult and marked [HttpPost] so basically it can do work and not worry about a real return. BUT !! the Success function of this same Ajax call allows me to update the view with the newly adjusted ViewModel....
My atempt to reproduce my original results is failing I see the model content but it doesnt render in the view
If anyone cares its pretty simple the Ajax function's main work cant call a controller action that updates the view. However the Ajax success call can assuredly call one of the controller's ActionResults to update the view and thereafter its related Partials in that view ,,,
the controller action in tha main part of the ajax call that DOES WORK needs to be marked EmptyResult & [HttpPost]
The controller action that really fires up an ActionResult to update your view ,, in my case, just returns the view and the newly modified model... and again note its called by the Success function of the previous cited ajax function The last code posting above pretty much covers it all
I am developing an ASP.Net MVC 3 Web Application. One of my Razor Views contains a few Textboxes and a Drop Down List. When the User selects an option from the Drop Down List, I need a Partial View, or something like this, to appear below the Drop Down List preferable without a post back.
The thing is, it isn't as easy as a simply JQuery Hide and Show for the Partial View, when the User selects an option from the Drop Down List, I need their option to be sent to a method in the Controller, perform some logic based on this option, and then return some data to the Partial View.
I haven't really got much experience with AJAX, but I get the feeling this is the technology I need to use in order to fulfil my problem.
Has anyone ever had to code anything similar to what I have described above? And if so, is AJAX what I need to use?
Also, if anyone knows of any tutorials or code snipets I could look at to help, that would be greatly appreciated.
Thanks.
UPDATE
I have followed Ryan's answer, but unfortunately I am still having some problems. I have created the following JavaScript file which is then referenced in my View
$(document).ready(function () {
$("#myDDL").change(ChangeEventOfDDL);
function ChangeEventOfDDL(){
var dropDownValue = $('#myDDL').val();
//alert(dropDownValue);
$.ajax({ type: "GET",
url: '#Url.Action("SomePartialView","testAjax")',
data: {
id: dropDownValue
},
success: function(data) {
$('#someDivToLoadContentTo').html(data);
}
});
}
});
View
<select id="myDDL">
<option></option>
<option value="1">F1</option>
<option value="2">F2</option>
<option value="3">ST1</option>
<option value="4">ST2</option>
</select>
<div id="someDivToLoadContentTo">
</div>
My Controller then looks like this
public class testAjaxController : Controller
{
//
// GET: /testAjax/
LocumEntities context = new LocumEntities();
public ActionResult SomePartialView(int id)
{
var test = "Hello World";
return View(test);
}
}
However, my method 'SomePartialView' never gets hit. Does anyone know why?
Thanks.
Yes Ajax would be the easiest thing to use here. There are plenty of good Ajax tutorials around, just remember that what Ajax does is effectively a background POST, so you can do everything you would normally do with MVC, except within an existing page.
The way I would get this to work would be to have your code something like this:
public class SomeController{
public ActionResult SomePartialView(){
// Do some logic
return View("SomePartial");
}
}
Your Ajax would be something like:
function ChangeEventOfDDL(){
$.ajax({
url: '#Url.Action("SomePartialView","Some")',
success: function(data) {
$('#someDivToLoadContentTo').html(data);
}
});
}
I hope that helps at least a little bit.
Crucially with Ajax, you can add a data object to the function, which is passed as a querystring. This means you can send values from your page quite easily with ajax. Working with the above example, the Javascript would be:
function ChangeEventOfDDL(){
var dropDownValue = $('#ddl').val();
$.ajax({
url: '#Url.Action("SomePartialView","Some")',
data: {
id: dropDownValue
}
success: function(data) {
$('#someDivToLoadContentTo').html(data);
}
});
}
The Id value is linked with the parameters of the method in your MVC class:
public class SomeController{
public ActionResult SomePartialView(int id){
// Do some logic
var model = MakeModelWithSupplierId(id);
return View("SomePartial",model);
}
}
And there you have an interactive partial view that has been populated with the value from your drop down.
Since a controller can also return a partial view, you can do the following:
$('#idofyourdropdown').change(function () {
var theValue = $(this).val();
$.post('#Url.Action("Action","Controller")', {nameOfParameter: theValue, function(data) {
$('#divWhereYouWantToAttachData').html(data);
});
});
On the change event of your dropdown, send the selected value to your desired controller action, which will pass it to the partial view and return the rendered html. The html is received in the data var and can be attached to the dom, wherever you want it (see jQuery documentation for this).
This is a common use case.
What you need to do is
create a controller method that can take the parameters you need (read about MVC model binding before you do so)
write javascript that will harvest the data you want from your form and make a call to your new controller method and render the results below
In jQuery it goes something like this:
$("#yourDIV").load('/area/controller/method', { property1: 'asasd', property2: 'asdasdadfa'})
The second parameter of this call should be prepared based on the data you harvest from your form. (if you don't know how, then learn javascript)
I'm looking into using partial views in MVC3 using Razor, and I get my partial view to render and it works fine.
What I'd like to do, though, is refresh the parent view when the partial view is submitted.
Code in my parent view to render partial view
<div id="mydiv">
#{ Html.RenderAction("Add", "Request"); }
</div>
Action for parent view is simple,
public ActionResult Index()
{
List<obj> reqs = //some query
return View(reqs);
}
In my partial view's get action I have:
public ActionResult Add()
{
AddRequestViewModel vm = new AddRequestViewModel();
//set some stuff on the VM here
return PartialView(vm);
}
In the post action called by the partial view, if modelstate isn't valid, return PartialView(vm)
If it is valid, I'd like the parent and partial views to refresh.
I tried RedirectToAction, but this can't be called in an action called by a partial, apparently, and I tried return Index();, but this causes an issue with the code used to render the partial view,
Exception Details: System.InvalidOperationException: The model item passed into the dictionary is of type 'System.Collections.Generic.List'1[DatRequests.Models.ReqRequest]', but this dictionary requires a model item of type 'DatRequests.ViewModels.AddRequestViewModel'.
Any suggestions on how to do this would be appreciated. The purpose of the page is to show a list of elements, and the partial contains a form to add a new element to the list.
Edit: The partial's model is different, as it contains data for selection, which is from a db, which is why I tried RenderAction, but I'm not sure if there are other ways of doing this.
When the partial view is submitted normally you submit it to some controller action. You could either submit it using a normal request or an AJAX request. If you use a normal request you could perform a standard redirect to the Index inside the POST controller action that will handle the form submission. If you use AJAX, you could return a JSON result pointing to the url that you want to redirect:
[HttpPost]
public ActionResult Foo(MyViewModel model)
{
if (!ModelState.IsValid)
{
return PartialView(model);
}
return Json(new { url = Url.Action("Index") });
}
and inside your AJAX success callback:
success: function(result) {
if (result.url) {
// we have a success
window.location.href = result.url;
} else {
// invalid modelstate => refresh the partial
$('#mydiv').html(result);
}
}
Probably RenderAction should not be used this way.
When using Html.RenderAction, a new/seperate request would be sent to the server. And you got another chance to load some data from db or somewhere else to display to the client. Also, you could apply OutputCache to this action. this is usually the way doing global cache.
Here you are doing a POST to the server. Either directly put a element here or using a partial view to do the Post. And in the corresponding action, do a RedirectToAction.
Do it with ajax or not isn't the point. my opinion is more about the right way using RenderAction
I'm using a Html.BeginForm but I need a hyperlink to trigger a postback to a ActionResult (similar functionality to a LinkButton). I don't think that I can use an ActionLink because i'm not routing to a view with the same name as the ActionResult (or have I misunderstood :S).
Any help would be appreciated.
Thanks
I think you have two options (though the first isn't as flexible and can get messy)
1) style your submit button like a hyperlink (easy, but you'll probably end up using Html.BeginAjax or something like that)
2) Style a div, ActionLink, or some other element and serialize the form data on posting back using jQuery
If you can better describe the data being returned, we can better customize the dataType and success parameters below.
$(function () {
$('#myButton').click(function (e) {
e.preventDefault();
$.ajax({
url: '/MyController/MySuperAction',
type: 'POST',
data: $('#formId').serialize(),
dataType: 'json',
success: function (xhr_data) {
// in this particular example, you'll
// parse your JSON returned.
}
});
});
});
Edit
So, you're controller could look like
public ActionResult MySuperAction(FormCollection form) {
// I don't recommend using FormCollection
// You should stick to the view model pattern
// process your form
return Json(new { MyValue = "Textbox value" });
}
And you'd need to modify the success function above to something like
success: function(xhr_data) {
$('#MyTextBoxID').val(xhr_data.MyValue);
}