update div in ajax in asp.net mvc - asp.net-mvc

i have written my codes by ajax as following : instead of updating div,has redirected to partial view.
according to update target id of ajax option is set,it cant update.
please help me
public class SearchController : Controller
{
public ActionResult search()
{
return View();
}
public PartialViewResult _search()
{
Thread.Sleep(3000);
ViewBag.message = "test";
return PartialView("_search");
}
}
#{
ViewBag.Title = "search";
}
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<h2>search</h2>
#Ajax.ActionLink("Click",
"_search",
new AjaxOptions
{
UpdateTargetId = "_search",
InsertionMode = InsertionMode.InsertAfter,
HttpMethod = "GET"
}
)
<div id="_search">
</div>

Make sure you have following scripts added into either of your view or masterview
jquery.unobtrusive-ajax.min.js
MicrosoftAjax.js
MicrosoftMvcAjax.js

try this
#Ajax.ActionLink("Click",
"_search",
null,
new AjaxOptions
{
UpdateTargetId = "_search",
InsertionMode = InsertionMode.InsertAfter,
HttpMethod = "GET"
}
)

Related

Submit button doesn't hit controller due to [ValidateAntiForgeryToken()] And Disabled Cookies

I am using #Html.AntiForgeryToken() , but due to this code , when i click on submit, it doesn't hit action in controller.
#using (Ajax.BeginForm("Action", "COntroller",null, new AjaxOptions { OnBegin = "$('#dvLoading').removeClass('displayNone');", OnSuccess = "ShowResultUpsID(data);", OnFailure = "$('#dvLoading').addClass('displayNone'); Showerror(); scrollToTop();" }, new { #id = "CreateID", #Name = "CreateID" }))
{
#Html.AntiForgeryToken()
}
below is my Action
[HttpPost]
[ValidateAntiForgeryToken()]
public ActionResult MyAction(Model object)
{
}
Note: with cookie disabled.
You need to add jquery.unobtrusive-ajax library to your project.
which help you to work with Html Ajax forms.
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
function OnSuccess(resolve) { console.log(resolve) }
function OnFailure(error) { console.log(error) }
function OnComplete(resolve) { console.log(resolve) }
</script>
#using (Ajax.BeginForm("AddUser", new AjaxOptions { HttpMethod = "POST", OnSuccess = "OnSuccess", OnComplete = "OnComplete", OnFailure = "OnFailure" }))
{
#Html.AntiForgeryToken();
#Html.HiddenFor(x => x.Id)
#Html.TextBoxFor(x => x.FirstName)
#Html.TextBoxFor(x => x.LastName)
<button>Save</button>
}
[HttpPost, ValidateAntiForgeryToken]
public ActionResult AddUser(UserModel model)
{
return Json(model, JsonRequestBehavior.AllowGet);
}

How can I pass a parameter together with the Model?

Here's my View (Model ActivityViewModel):
#model GPMS.Models.ActivityViewModel
<div class="tab-pane" id="managepayments" role="tabpanel">
#{ Html.RenderPartial("_Payments", Model.Payments); }
</div>
Which render a Partial (Model IEnumerable<GPMS.Models.PaymentViewModel>):
#model IEnumerable<GPMS.Models.PaymentViewModel>
#using (Ajax.BeginForm("SavePayments", "Activities", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "DynamicContainer", InsertionMode = InsertionMode.Replace, OnBegin = "AjaxBeginFormOnBegin", OnComplete = "AjaxBeginFormOnComplete", OnSuccess = "AjaxBeginFormOnSuccess", OnFailure = "AjaxBeginFormOnFailure" }))
{
#Html.AntiForgeryToken()
<!-- My Form -->
}
Which send Ajax request to my Controller's Action:
public ActionResult SavePayments(IEnumerable<PaymentViewModel> payments)
{
if (ModelState.IsValid) {
// code; here I need ActivityViewModel.ID
}
}
The question is: how can I pass to that SavePayments also my activity ID stored in ActivityViewModel.ID? Can I do with routing?
I don't want to pass the whole ActivityViewModel to SavePayments, otherwise I need to take care of its required fields for the ModelState.IsValid check.
One option is to use the overload of Html.Partial to pass the ID using additionalViewData, then retrieve it in the partial view and add it as a route value in the form.
In the main view
#{ Html.RenderPartial("_Payments", Model.Payments, new ViewDataDictionary { { "ID", Model.ID} }); }
And in the partial
#using (Ajax.BeginForm("SavePayments", "Activities", new { id = ViewData["ID"] }, new AjaxOptions { ....
Then add a parameter in the POST method for the ID
public ActionResult SavePayments(int id, IEnumerable<PaymentViewModel> payments)

Unable to bind model in ajax.beginform() or ajax.actionLink() postback

when I am posting the form back using Ajax.ActionLink() I am getting null values for all the properties. I have also tried the same using #ajax.beginform(). But i ended up with an error "Unexpected token u" in the console. Please help.
My class goes like this
public class Search
{
public string SearchText { get; set; }
public int ContinentId { get; set; }
public string City { get; set; }
}
My View goes like this
#model MvcApplication5.Models.BusinessLogic.Search
#{
ViewBag.Title = "Index";
var continetList = (SelectList)ViewBag.TargetContinentName;
var infoTypesList = (List<SelectListItem>)ViewBag.Infotype;
}
#Html.TextBoxFor(m => m.SearchText)<br/>
#Ajax.ActionLink("Search", "Search", "Home", new AjaxOptions{ HttpMethod = "POST", UpdateTargetId = "submitId", InsertionMode = InsertionMode.Replace,
LoadingElementId = "loadingId"})
</div>
My controller goes like this
//POST:/Home/
[HttpPost]
public PartialViewResult Search(Search search, int? page)
{
//Code goes here
//Here the object search is giving me null values for all the properties
return PartialView("_Search",listInfo);
}
you have to use Ajax.BeginForm like this:
#model MvcApplication5.Models.BusinessLogic.Search
#{
ViewBag.Title = "Index";
var continetList = (SelectList)ViewBag.TargetContinentName;
var infoTypesList = (List<SelectListItem>)ViewBag.Infotype;
}
#using (Ajax.BeginForm("Search", "Home",
new AjaxOptions
{
HttpMethod = "POST",
UpdateTargetId = "submitId",
InsertionMode = InsertionMode.Replace,
LoadingElementId = "loadingId"
},
new { page = 1}))
{
#Html.TextBoxFor(m => m.SearchText)
#Html.HiddenFor(m=>m.ContinentId)
#Html.HiddenFor(m=>m.City)
<input type="submit" value="Search" name="Search"/>
}

parsing json from asp.net mvc controller action to ajax.actionlink

I am working on asp.net mvc application and I have added an actionlink like this:
<%= Ajax.ActionLink("Event Notifications", "processCallrecording", new { Id = ViewData["RecordingIDsEdit"] }, new AjaxOptions
{
OnSuccess = "StatusChanged",
HttpMethod = "POST"
})%>
My controller is like this:
[HttpPost]
public JsonResult ProcessCallRecording(int Id = 0)
{
int result = id;
return Json(new {NewStatus = result.ToString()});
}
My js function is like this:
function StatusChanged(data) {
alert("order #:" + data.NewStatus + "has a new status: "
+ data.NewStatus);
}
and I see undefined in alert. I am struggling for last 2 hours on this issue. Please suggest me what is wrong ?
Try this
<%= Ajax.ActionLink("Event Notifications", "processCallrecording", new { Id = Convert.ToInt32(ViewData["RecordingIDsEdit"]) }, new AjaxOptions
{
OnSuccess = "StatusChanged",
HttpMethod = "POST"
})%>
as you i have used viewData so you are missing Convert it into Int. also make sure i have added these script before action link.
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

ViewModel not storing values when Ajax.ActionLink calling controller

When I'm clicking ActionLink and setting ViewModel values in controller I can see changes when View being rendered. But same values comes as null into Controller when I'm clicking ActionLink second time.
How do I store the value, so it comes into controller ?
View:
#Ajax.ActionLink("Click me", "AjaxTest", "Controller", new AjaxOptions()
{
UpdateTargetId = "updatePanel",
HttpMethod = "POST",
OnSuccess = "A()"
})
<div id="updatePanel">
#Html.Partial("~/Views/Shared/_UpdatableContent.cshtml", this.Model)
</div>
Controller:
[HttpPost]
public ActionResult AjaxTest(MyViewModel model)
{
model.A = "A"
return PartialView("_UpdatableContent", model);
}
Partial view _UpdatableContent:
#Html.HiddenFor(x => x.A)
#if (Model.A == "A")
{
//Draw
}
Try adding this.Model to your ActionLink following:
#Ajax.ActionLink("Click me", "AjaxTest", "Controller", this.Model, new AjaxOptions() { UpdateTargetId = "updatePanel" })
This method passes the model back into the request, which should allow the update to happen.
Probably my biggest gripe with ASP.NET MVC is the fact that the various "Helper" functions are overloaded to the nth-degree, and not always consistently in terms of the order the arguments appear...
Hope that helps :)
I had this very same problem. Setting HttpMethod = "Post" in the AjaxOptions fixed it for me, thanks Sergejs.
My final, working code is as follows
#{
AjaxOptions ajaxOptions = new AjaxOptions
{
HttpMethod = "Post",
LoadingElementId = "product-adding-" +#Model.Product.Id,
LoadingElementDuration = 100,
OnSuccess = "AddedToCart"
};
}
<div>
#Ajax.ActionLink("Add to cart",
"AddToCart",
"Cart",
new { id = Model.Product.Id, returnUrl = Request.Url.PathAndQuery },
ajaxOptions,
new { #class = "button" })
<img id="product-adding-#Model.Product.Id" src="~/Images/ajax_loader.gif" />
</div>

Resources