Here is my quandary. I have an MVC 3 web site, and I have a page that needs to contain a sub-form, if you will, to collect some data related to my model. I have successfully created a partial view that contains the markup and I am rendering this properly. However, the input button in the partial view doesn't seem to be doing much of anything. Here is the form in the partial view:
#using (Ajax.BeginForm("AddProductCustomField", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "addCustomFieldView" }))
{
#Html.DropDownListFor(m => m.SelectedCustomFieldId, new SelectList(Model.CustomFields, "FieldId", "FieldName"), "-- Select One --", new { #class = "int_std_select" })<text> </text>
#Html.TextBoxFor(m => m.CustomFieldValue, new { #class = "int_std_textbox" })
<input type="submit" value="Add Custom Field" /><br />
}
"AddProductCustomField" is the name of my controller method that I want to handle this form post. However, clicking the submit button does nothing. I even popped open Fiddler to see if a request was getting eaten and nothing. I've included all the appropriate JavaScript files for this page (MicrosoftAjax, MicrosoftMvcAjax and the unobtrusive JavaScript). I'm stumped.
Please let me know if I need to provide more info. Thanks much, this has been stumping me for days!
You mentioned sub-form. Do you literally mean you are nesting forms? This is not supported in HTML, so I would think that's probably the source of your problem.
Related
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)
All,
I have an Html.Actionlink that calls a method in my controller and should return a partial view. My partial view is displayed within Index.cshtml, the partial view is _ServerStatusList.cshmtl.
View
#using (Html.BeginForm())
{
#Html.ActionLink("Start",
"StartServer",
null,
new { #class = "startButton" })
}
Controller
[HttpGet]
public PartialViewResult StartServer(Model model)
{
model.StartServer("server01");
return PartialView("~/Views/Home/_ServerStatusList.cshtml", model.Servers);
}
Right now upon clicking the start button all of the functionality works correctly as far as starting the server goes, but it returns the incorrect view. After clicking I get redirected to localHost/home/StartServer and it says "running" (as a started server should say in my server list) on a blank page. Then if I manually navigate to my server status page via the address bar it shows the server is running (as it should say) in my _ServerStatusList.cshtml.
I used an Ajax ActionLink in another part of my project to click a button and return a partial view. I tried it for this button too using this code.
<input id="StartButton" type="image" value="submit" src="~/Images/start.png" alt="Start" height="25" />
#Ajax.ActionLink("Start", "StartServer",
new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "CurrentView"
}
)
Clicking the button does not work but clicking on the word "start" does something similar to the Html.ActionLink. If I click the Start link it takes me to Index.cshtml, displays running in the area where the partial view should be, but does not load _ServersStatusList.cshtml. Again upon manual redirection everything is as it should be, running and correctly formatted.
How can I have the Ajax ActionLink use the image as the button, and upon clicking the image, return the correct partial view?
Thanks
MVC is smart enough to find the view you need, so change your return PartialView from:
PartialView("~/Views/Home/_ServerStatusList.cshtml", model.Servers);
//To
PartialView("_ServerStatusList", model.Servers);
This should return the correct view :).
I have the following index:
<div id='addProduct'>
#{ Html.RenderPartial("Create", new BoringStore.Models.Product()); }
</div>
<div id='productList'>
#{ Html.RenderPartial("ProductListControl", Model.Products); }
</div>
The partial Create view contains an invisible div which is used to create a new product.
After doing so the partial view ProductListControl is updated.
Now I want to do so with an edit function.
Problem: It's not possible to integrate the edit page while loading the index because at this moment I don't know which product the user wants to edit.
My thought:
I'd like to call my existing edit view in an jquery modal (not the problem) so the user can perform changes.
After saving the modal is closed (still not the problem- I could handle this) and the ProductListControl is updated (here's my problem ... :().
How am I able to do so?
I've seen some tutorials but I'd like to keep it as clean & easy as possible.
Most of them are using dom manipulating and get feedback from the server (controller) by a JsonResult.
If possible I'd like to stick to the razor syntax, no pure JavaScript or jquery and if possible I'd like to avoid JsonResults.
One way might be to use the Ajax.BeginForm for your create product view.
The Ajax.BeginForm accepts a number of AjaxOptions, one being the UpdateTargetId (your DOM id, in this case your productlist div), more info here.
Then in your product controller code you can return a partial view, with the product list. So for example:
Index.cshtml
#using (Ajax.BeginForm("AjaxSave", "Product", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "productList", InsertionMode = InsertionMode.Replace }))
{
// your form
<p>
<input type="submit" value="Save" />
</p>
}
...
<div id="productList">...
</div>
ProductController.cs
[HttpGet]
public ActionResult AjaxSave(Product product)
{
if (ModelState.IsValid)
{
// save products etc..
}
var allProducts = _productService.GetAllProducts();
return PartialView("ProductListControl", allProducts);
}
There is a nice article on about this here.
I have two action methods. One of them submits the inserted data of a "new product", and the other form must upload the photos of that product. Each one has it's own Model, View, and each one calls it's own Action from controllers, which are completely separate.
But I need to have the forms both in just one view.
I've done this by using #html.action() to render the "Upload" action's View in the "Insert New Product" action's View.
The problem is, both of the submit buttons call the same "Insert New Product" action :|
Take a look. Here's the first View:
#using (Html.BeginForm("Insert_New_Product", "Admin", FormMethod.Post))
{
// Inputs, Validation Messages and all those stuff ...
<input type="submit" name="Insert_New_Product" value="Add New Product" />
// Here, I render the "Upload" View :
#Html.Action("Upload", "UploadImage")
}
The "Upload" View looks like this :
#using (Html.BeginForm("Upload", "UploadImage", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
// Inputs and stuff ...
<input type="submit" value="Upload" name="Upload"/>
}
So how is this possible to have two (or more) forms, each one calling it's own ActionResult on submit?
I'd appreciate your help.
I think this #Html.Action("Upload", "UploadImage") is the problem. You're essentially rendering the second form inside of the first one. That's not going to work. Try changing it to this:
#using (Html.BeginForm("Insert_New_Product", "Admin", FormMethod.Post))
{
// Inputs, Validation Messages and all those stuff ...
<input type="submit" name="Insert_New_Product" value="Add New Product" />
}
// Here, I render the "Upload" View :
#Html.Action("Upload", "UploadImage")
Also, you should really be using Html.RenderAction instead of Html.Action as it writes directly to the response stream. See here for more information. Like so:
#{ Html.RenderAction("Upload", "UploadImage"); }
I have a partial view inside a div with id 'rating'. So I have a ajax link inside the same partial view. So when I click on the link its updating one time and if i click the link second time, its loading the div two times and clicking three times load multiple times.
Anybody have the same issue?
<div class="rating">
#Ajax.ActionLink("Flag this review as inappropriate", "CourseRatingFlag", "Content", new { cID = Model.courseRatings[index].crid}, new AjaxOptions() { HttpMethod = "POST",TargetId="rating" })
some content...
</div>
There is a similar question here.
In my case, I resolved it locating the target div out of the partial view.