ASP.NET MVC 2 - how to get Ajax.BeginForm work properly inside partial view - ajax

I have a View with url like
/Home/SetResults?patientId=[somePatientId]
, part of it gets conditionaly ajax-updated with some partialview
Inside of that partialView I have this code
<% using (Ajax.BeginForm("Action", "Home", new AjaxOptions { UpdateTargetId = "placeholder", InsertionMode = InsertionMode.Replace,HttpMethod = "Post"}))
{%>
<div id="placeholder">
....
Whenever I press submit button I get to my simple controller action-method
[HttpPost]
public ActionResult Action(MyModel model)
{
return PartialView();
}
Everything works fine except the ajax itself - instead of gettin my placeholder updated with the result of controller action I'm always getting redirect to a view with the url of
/Home/Action
So, is it possible to partially update partial view? If yes what I'm doin wrong?

One thing to check would be that you are including the ajax script:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
I've noticed if this isn't included, submitting the Ajax form behaves like a regular submit.

Related

Why can I not reuse a method in an Ajax form in a partial view?

I'm working on an MVC Application that has a basic ajax form for submitting data. After the form, there is a partial view which has another ajax form in it for submitting data to a drop-down box allowing users to update its contents without leaving the page.
Create
#model My Project.Models.Cars
#using (Ajax.BeginForm("Create", "Cars", new AjaxOptions
{
HttpMethod = "POST"
}))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary()
... form fields would be here ...
}
#Html.Partial("_Manufacturer")
Partial View(_Manufacturer)
#using (Ajax.BeginForm("AddManufacturer", "AnotherController", new AjaxOptions
{
HttpMethod = "POST"
}))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary()
... form fields for populating dropdown list ...
}
When I try to submit the ajax form in the partial view I am getting an error of:
404 Resource Not Found at Cars/AddManufacturer
The controller it's supposed to use is AnotherController as you can see in the form above. I don't want to have to create multiple forms and methods, I want to reuse the method I have. Is there a reason it's doing this and is there anything I can do about it?
Sometimes partials render URLs differently accordingly to where they are called from.
Inspect your page and see if the URL rendered on the second form is right. If that is the case then find a method overload that can resolve the route correctly.
Here is a list of the overloads:
https://learn.microsoft.com/en-us/previous-versions/aspnet/web-frameworks/dd492974(v=vs.118)

AJAX search box in MVC [duplicate]

I want to show a success message after calling the following ajax.beginform
from Index view
#using (Ajax.BeginForm("Insert", "Home", new AjaxOptions() { UpdateTargetId = "result", HttpMethod = "POST" }))
{
#Html.TextAreaFor(m => m.openion)
}
this is my result div
<div id="result">
</div>
and my controller is
[Httppost]
public ActionResult InforMessage(openionModel usr)
{
return Content("Thanks for adding your openion");
}
but when i try this it is going to another view InforMessage
It is not updating the result div.
There is no Informessage Exist. Still it open a new page with message
"Thanks for adding your openion".How to solve this?
If your redirecting to another page its because you do not have the correct scripts loaded (or have duplicates or have them in the wrong order) so its doing a normal submit.
Ensure you have included (in order)
jquery-{version}.js
jquery.unobtrusive-ajax.js

Update div using ajax.beginform inside asp mvc view

I want to show a success message after calling the following ajax.beginform
from Index view
#using (Ajax.BeginForm("Insert", "Home", new AjaxOptions() { UpdateTargetId = "result", HttpMethod = "POST" }))
{
#Html.TextAreaFor(m => m.openion)
}
this is my result div
<div id="result">
</div>
and my controller is
[Httppost]
public ActionResult InforMessage(openionModel usr)
{
return Content("Thanks for adding your openion");
}
but when i try this it is going to another view InforMessage
It is not updating the result div.
There is no Informessage Exist. Still it open a new page with message
"Thanks for adding your openion".How to solve this?
If your redirecting to another page its because you do not have the correct scripts loaded (or have duplicates or have them in the wrong order) so its doing a normal submit.
Ensure you have included (in order)
jquery-{version}.js
jquery.unobtrusive-ajax.js

Validate only ajax loaded partial view

I have a form with some controls. There is a button on the form which loads a partial view. Inside the partial view, there are two required field textboxes along with a button. And when its clicked, I need to display error messages only for textboxes which are inside the partial view, but not for the fields in the actual form. And when I click form's submit button, all error messages must show up.
After partial view is loaded, I am re-initializing the validation plugin as below.
$('#test').removeData("validator");
$.validator.unobtrusive.parse('#test');
I tried using validation attribute described in below thread but its not working. Maybe it works for normally loaded views.
ASP.NET MVC Validation Groups?
However, I can validate individually by calling textbox1.valid() and textbox2.valid(). But I think I am missing standard way of doing it. Any help is appreciated.
you can do this by submitting your partial view using Ajax.BeginForm()
//In Partail View
#model SomeModel
#using (Ajax.BeginForm("SomeActionName", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "targetId"}))
{
#Html.EditorFor(mode=>model.FirstText)
#Html.EditorFor(mode=>model.SecText)
<input type="submit" value="save">
}
//In Controller
public ActionResult SomeAction(SomeModel model)
{
return PartaiulView(model);
}
here you can validate your Partial View
NOTE: when you submit you form using Ajax.BeginForm you must specify "UpdateTargetId" where your result will be appear on View.
//In View
<div id="targetId">
#Html.Partail("PartialView")
</div>
OR if you want to Redirect to another action if your model is valid then modified your action
public ActionResult SomeAction(SomeModel model)
{
if(ModelState.IsValid)
{
return Json(new {redirect = #Url.Action("SomeAction","SomeController")})
}
return PartaiulView(model);
}
then in partail view you can invoke OnSuccess method of Ajax.BeginForm
#using (Ajax.BeginForm("SomeActionName", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "targetId",OnSuccess="success"}))
{
}
<script type="text/javascript">
function success(data)
{
if(data.redirect)
{
windows.location = data;
}
}
</script>
check both way which one is suitable to you.

Partial rendering in MVC3

I'm trying to render a particular section/div click a particular link or button. Suppose link/button is in the A.cshtml page , and b.cshtml is a partial view that I want to load in A.cshtml page within a particular section/div. I tried Ajax.ActionLink but can't do. Any help or suggestions?
I tried ajaxactionlink but cant do
That's really not the way to ask a question here. Cant do is not a precise problem description. Next time when you ask a question on SO show what you have tried.
This being said, let me provide you with an example:
#Ajax.ActionLink("click me", "SomeAction", new AjaxOptions {
UpdateTargetId = "result"
})
<div id="result"></div>
and then you will have an action which will render this partial view:
public ActionResult SomeAction()
{
return PartialView("_NameOfYourPartial");
}
Finally make sure that you have referenced the jquery.unobtrusive-ajax.js script to your page which uses the HTML5 data-* attributes emitted by the Ajax.ActionLink helper to hijack the click event and send an AJAX request instead of the normal request:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
The controller can return a partial view as action result:
public ActionResult Details()
{
var model = // your model
var viewName = // your partial view name
return PartialView(viewName, model);
}
Ajax.ActionLink should do it, may be you missed somwthing.
Check this post it may give you the answer

Resources