Develop Reference

partial view form submits object bound to parent view model instead of its own model

I have the following bits from my test application.
A method used for posting the data from a partial view.
public IActionResult AddPayor(Payor newPayor)
{
if (ModelState.IsValid)
{
mvSrv.SaveOnePayor(newPayor);
return RedirectToAction("Index", "Payor");
}
else
{
return View();
}
}
And index cshtml view where I want to have a list of item plus the ability to add more.
Notice the model class PayorView; it contains a list of payors to use in the ViewPayor view and a single payor to use in the AddPayor view. I do it this way so that the AddPayor can have an object passed down even when the list is empty. Earlier I tried to have only the list as the model but sending the [0] element failed when list was empty.
#addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers"
#model FSA_Tracker.ViewModels.PayorView
#{
Layout = "_Layout";
}
<partial name="ViewPayor" for="payors" />
<partial name="AddPayor" for="payor" />
The partial view for AddPayor is just an input form. The model object is pass down from the parent view.
#addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers"
#model FSA_Tracker.Models.Payor
<fieldset>
<form asp-action="AddPayor" method="post">
<div asp-validation-summary="ModelOnly" class="input-validation-error"></div>
<div id="formContainer">
<p>
<label asp-for="Name"></label>
<input asp-for="Name" />
<span asp-validation-for="Name"></span>
</p>
<p>
<button type="submit">Add Payor</button>
</p>
</div>
</form>
</fieldset>
My problem is that the newPayor argument in my post method does not get initialized, but rather what gets initialized is the PayorView.payor property in the parent view model object. So I can make it work if I change to
and I extract the payor from there.
Is there a way to prevent my partial view from binding its object to the parent view model? Preferably from the parent view.
Thanks

try passing in the payor model into your partial view like:
<partial name="ViewPayor" model="#Model.Payor" />

Got it. I needed to instantiate and pass the new new model into the partial. Now I see what Matthias L meant. I just didn't know I could go to a different namespace than the one in the declaration section. This will give the partial view a new Provider object rather than an attribute from the parent view.
#{
var provider = new FSA_Tracker.Models.Provider();
<partial name="AddProvider" model="#provider" />
}

Persisting Collections in ViewModel

I've been struggling for quite some time now with trying to maintain a list of objects when the ViewModel is submitted back to the controller. The ViewModel receives the list of objects just fine, but when the form is submitted back to the controller the list is empty. All of the non-collection properties are available in the controller, so I'm not sure what the issue is. I have already read the guide a few people have referenced from Scott Hanselman here
From what I can see, everyone solves this by building an ActionResult and letting the model binder map the collection to a parameter:
Controller:
[HttpPost]
public ActionResult Submit(List<ConfigurationVariable> variables)
{
}
View:
#for (int i = 0; i < Model.ConfigurationVariables.Count; i++)
{
<div class="row">
<div class="col-xs-4">
<label name="#Model.ConfigurationVariables[i].Name" value="#Model.ConfigurationVariables[i].Name" />
</div>
</div>
<div class="row">
<div class="col-xs-4">
<input type="text" class="form-control" name="#Model.ConfigurationVariables[i].Value" value="#Model.ConfigurationVariables[i].Value" />
</div>
</div>
}
What I really want is to be able to pass my ViewModel back to the controller, including the ConfigurationVariables List:
Controller:
[HttpPost]
public ActionResult Submit(ReportViewModel report) //report.ConfigurationVariables is empty
{
}
View:
#for (int i = 0; i < Model.ConfigurationVariables.Count; i++)
{
<div class="row">
<div class="col-xs-4">
#Html.LabelFor(model => model.ConfigurationVariables[i].Name, new { #class = "form-control" })
</div>
</div>
<div class="row">
<div class="col-xs-4">
#Html.TextBoxFor(model => model.ConfigurationVariables[i].Value, new { #class = "form-control" })
</div>
</div>
}
This will be a complicated form and I can't just put every collection into the ActionResult parameters. Any help would be greatly appreciated

You need to hold the Name property in a hidden input so that it's submitted. Label values are lost.
#Html.HiddenFor(model => model.ConfigurationVariables[i].Name)

Alright, based on your comment you won't be able to utilize mvc's form binding. No worries.
Instead of this controller definition:
public ActionResult Submit(List<ConfigurationVariable> variables)
Use one of these two:
public ActionResult Submit()
public ActionResult Submit(FormCollection submittedForm)
In the first you can access the Request object, you'll need to debug and locate your variable, then you'll need some logic to parse it apart and used the values submitted.
In the second, the form collection will be made up of all the INPUT elements in your form. You will be able to parse through them directly on the object without interference from the other attributes of the Request object.
In both cases you will probably need to use #Html.TextBox, and not TextBoxFor, and you will need to dynamically populate your dropdowns in your view.
I'm not 100% sure about the Request object, but for sure on the FormCollection you will need to create an Input element for each value/collection you want submitted. Including hidden inputs for your textboxes
Your textboxes will need to be SelectListItem collections. those require a key and a value, and when they are submitted you can loop through the collection and check the .Selected attribute.
I would try with FormCollection first, and if that doesn't work fall back to the Request object.
Also note: you are not getting a viewmodel back from the form submission, you will need to rebuild it from the form elements. If you want to post prepopulated data to the view you will need to build a view model and do appropriate parsing on the view to display it.

MVC 4 Clicking a Button to get a Partial Page

I am creating a page with a search property. The user will enter a number in the search field and hit the submit button. I need to be able to call a controller method in order to run the search code.
For now I am just trying to hit a partial page to just get some functionality in there. Below is the code I have so far. As of now nothing happens when I click the button. I hear Ajax was something to use so I have been playing with that a little. I am still learning the framework so bear with me.
<div class="span6 roundedCorners">
<div class="row-fluid Title">
<div class="span6">
Search Area
</div>
</div>
<div class="row-fluid individual">
<div class="row-fluid">
<div class="span4"><span class="pull-right fieldDescription">Number</span></div>
<div class="span8"><input /></div>
</div>
<div class="row">
<div class="span12" id="adminSubmitButton">
#using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "_adminDetails" }))
{
<button type="submit" class="btn btn-inverse">Submit</button>
}
</div>
</div>
</div>

Your form is empty, it only has a submit button. You will need to move your search button inside the form. Something like this:
Model
public class SearchModel
{
[Required]
public string Query { get; set; }
}
View
#model SearchModel
...
#using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "_adminDetails" }))
{
#Html.EditorFor(m => m.Query)
#Html.ValidationMessageFor(m => m.Query)
<button type="submit" class="btn btn-inverse">Submit</button>
}
<div id="_adminDetails"></di>
Note: Make sure you have an element with id _adminDetails
Your controller will have to take the model and perform the search. Example:
Controller
[HttpPost]
public ActionResult Index(SearchModel model)
{
//do something with your model (perform search)
return View(results);
}

Alright, I have it partially working now. When i click the button I am able to call the controller method using:
function adminButton()
{
$("#adminDetails").load("#Url.Action("ControllerMethod", "ControllerName")");
}
The #Url.Action helper allows me to call the method which returns a partial view. This is a step in the right direction. But from what I am reading I should be able to use the following Url helper instead of the #Url.Action:
"#Url("ControllerMethod", "ControllerName")/" + submitButton.Value
I have tried some variations and I am still doing some reading to figure out a solution. Is there a helper that would let me do this?

Thanks for the help guys. I did end up getting my problem solved friday evening. Basically what I did was load the partial page when the button was clicked through the help of JS/jQuery and the Razor #Url.Action() to call the controller method that returns a PartialView:
<script type="text/javascript">
function adminButton()
{
var link = "#Url.Action("ControllerMethod", "ControllerClass", new {
number = -1})";
var num = parseInt($("#number").val());
link = link.replace(-1, num);
$("#details").load(link);
}
</script>

unable to render partial view in asp.net mvc using ajax?

Problem is : I do have Index.cshtml as
#{
ViewBag.Title = "Search";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="#Url.Content("../../Scripts/jquery.unobtrusive-ajax.min.js") type="text/javascript"></script>
<h2>Answer's are </h2>
<div id="result">
#Ajax.ActionLink("Search Wiki",
"WikiAns",
new AjaxOptions{
UpdateTargetId = "result",
InsertionMode=InsertionMode.Replace,
HttpMethod="GET",
LoadingElementId="progress"
})
</div>
<div id="progress" style="display: none">
<img src="#Url.Content("../../Content/Images/ajax-loader.gif")" alt="loader" />
</div>
Now i do have partial view model _WikiAns:
#model IEnumerable<Questions.Models.WikiAnsClass>
<h2>Our Links</h2>
<table>
#foreach (var item in Model) {
<tr>
<td>
#item.content
</td>
</tr>
}
</table>
Now using above i want is that...on clicking Search Wiki action link, id="result" get all partial view rendered in it. But its not happening. Instead of its going to a page "localhost:80/Search/WikiAns" and showing the result there. but i want to it to stay at localhost:80/Search and replace its "result" id. but its not working this way.
Here is my action called WikiAns
public ActionResult WikiAns()
{
//Code to follow...
var wikians = //code to follow
return PartialView("_wikiAns", wikians);
}
What's the problem ?
Also how can i implement this Ajax GIF loader...i mean showing it while action gets executed. ?
Please suggest
Thanks

#Pbirkoff may be right about this but you can go through my post of very easy to implement demo of your scenario and build it up from there.
http://mazharkaunain.blogspot.com/2011/05/aspnet-mvc-razor-render-partial-view.html
http://mazharkaunain.blogspot.com/2011/04/aspnet-mvc-render-partial-view-using.html

You need to include Microsoft Ajax scripts at your page or layout.

PartialView form validation then calling a controller method in MVC3

I am very new to MVC3 and having problems wrapping my head around things. Right now I have a partial view which I have simplified below:
#model blah.blah.blah.blah.ForumPost
#using (Html.BeginForm()) {
<fieldset>
<legend>ForumPost</legend>
<div class="editor-label">
#Html.LabelFor(model => model.ForumID)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ForumID)
#Html.ValidationMessageFor(model => model.ForumID)
</div>
<p>
<input type="submit" value="Create" />
#Html.ValidationSummary(true)
</p>
</fieldset>
<div>
#Html.ActionLink("Back to List", "Index")
</div>
}
I am not what to do for form validation. I have been trying to using jquery validation but I cant seem to find a good example that fits what I am doing and just get lost. I was basing it off this example here but it isn't enough.
After I am done I want to call a method in some code and I am not really sure of a clean way to do this. The way I have it currently working is using an ajax call and it's really ugly. Also a colleague suggested I pass the method an actual forum post but I don't know how. The code for the method I want to call is below:
public void PostToForum(ForumPost post)
{
UserService cu = new UserService();
int PostUserID = cu.GetUserIDByUsername(base.User.Identity.Name);
if (this.ModelState.IsValid)
{
ForumPost nfp = service.CreateForumPost(post);
}
}
Anyone have some tips? Thanks.
I can provide more code if it's necessary.

Html forms are usually submitted to controller actions:
[HttpPost]
public ActionResult Create(ForumPost model)
{
if (!ModelState.IsValid)
{
// validation failed => redisplay the view so that the user can fix the errors
return View(model);
}
// at this stage the model is valid => process it:
service.CreateForumPost(model);
return ...
}
Now since this is a partial view you must be careful with the view you are returning from this controller action as well as the model. If you don't use AJAX you should return the entire parent view and the parent view model. If you use an AjaxForm then you could only work with the partial model and view. Also in this case in the event of success you could return a Json result to the view to indicate this success so that the javascript handler that will be executed could take the respective actions.