I have a problem concerning Partial views in MVC Razor. Any help is highly appreciated, it's most likely something I've missed, but I could find nothing while searching that had the same problem replicated.
So I'm binding my view to a view model.
public class Person
{
public string Name { get; set; }
public virtual ContactInformation ContactInformation { get; set; }
}
And then I have a view with a partial to render the contact information model.
<div>
#Model.Name
</div>
<div>
#Html.Partial("_ContactInformation", Model.ContactInformation)
</div>
However, the "_ContactInformation" view is rendered without ContactInformation in the nameattribute of the <input>s
Usually razor binds the name attribute to something like: name="ContactInformation.Address". But since it's a partial it gets rendered as name="Address".
Am I missing something or is this the intended way for it to work?
You have two options. Option 1 - specify the prefix explicitly:
#Html.Partial("_ContactInformation", Model.ContactInformation, new ViewDataDictionary
{
TemplateInfo = new System.Web.Mvc.TemplateInfo { HtmlFieldPrefix = "ContactInformation" }
})
Options 2 is to turn partial view into an editor template for your model and than use EditorFor helper method, that should be able to add prefixes for you:
#Html.EditorFor(m => m.ContactInformation)
Related
I have a ViewModel that has a complex object as one of its members. The complex object has 4 properties (all strings). I'm trying to create a re-usable partial view where I can pass in the complex object and have it generate the html with html helpers for its properties. That's all working great. However, when I submit the form, the model binder isn't mapping the values back to the ViewModel's member so I don't get anything back on the server side. How can I read the values a user types into the html helpers for the complex object.
ViewModel
public class MyViewModel
{
public string SomeProperty { get; set; }
public MyComplexModel ComplexModel { get; set; }
}
MyComplexModel
public class MyComplexModel
{
public int id { get; set; }
public string Name { get; set; }
public string Address { get; set; }
....
}
Controller
public class MyController : Controller
{
public ActionResult Index()
{
MyViewModel model = new MyViewModel();
model.ComplexModel = new MyComplexModel();
model.ComplexModel.id = 15;
return View(model);
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
// model here never has my nested model populated in the partial view
return View(model);
}
}
View
#using(Html.BeginForm("Index", "MyController", FormMethod.Post))
{
....
#Html.Partial("MyPartialView", Model.ComplexModel)
}
Partial View
#model my.path.to.namespace.MyComplexModel
#Html.TextBoxFor(m => m.Name)
...
how can I bind this data on form submission so that the parent model contains the data entered on the web form from the partial view?
thanks
EDIT: I've figured out that I need to prepend "ComplexModel." to all of my control's names in the partial view (textboxes) so that it maps to the nested object, but I can't pass the ViewModel type to the partial view to get that extra layer because it needs to be generic to accept several ViewModel types. I could just rewrite the name attribute with javascript, but that seems overly ghetto to me. How else can I do this?
EDIT 2: I can statically set the name attribute with new { Name="ComplexModel.Name" } so I think I'm in business unless someone has a better method?
You can pass the prefix to the partial using
#Html.Partial("MyPartialView", Model.ComplexModel,
new ViewDataDictionary { TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "ComplexModel" }})
which will perpend the prefix to you controls name attribute so that <input name="Name" ../> will become <input name="ComplexModel.Name" ../> and correctly bind to typeof MyViewModel on post back
Edit
To make it a little easier, you can encapsulate this in a html helper
public static MvcHtmlString PartialFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, string partialViewName)
{
string name = ExpressionHelper.GetExpressionText(expression);
object model = ModelMetadata.FromLambdaExpression(expression, helper.ViewData).Model;
var viewData = new ViewDataDictionary(helper.ViewData)
{
TemplateInfo = new System.Web.Mvc.TemplateInfo
{
HtmlFieldPrefix = string.IsNullOrEmpty(helper.ViewData.TemplateInfo.HtmlFieldPrefix) ?
name : $"{helper.ViewData.TemplateInfo.HtmlFieldPrefix}.{name}"
}
};
return helper.Partial(partialViewName, model, viewData);
}
and use it as
#Html.PartialFor(m => m.ComplexModel, "MyPartialView")
If you use tag helpers, the partial tag helper accepts a for attribute, which does what you expect.
<partial name="MyPartialView" for="ComplexModel" />
Using the for attribute, rather than the typical model attribute, will cause all of the form fields within the partial to be named with the ComplexModel. prefix.
You can try passing the ViewModel to the partial.
#model my.path.to.namespace.MyViewModel
#Html.TextBoxFor(m => m.ComplexModel.Name)
Edit
You can create a base model and push the complex model in there and pass the based model to the partial.
public class MyViewModel :BaseModel
{
public string SomeProperty { get; set; }
}
public class MyViewModel2 :BaseModel
{
public string SomeProperty2 { get; set; }
}
public class BaseModel
{
public MyComplexModel ComplexModel { get; set; }
}
public class MyComplexModel
{
public int id { get; set; }
public string Name { get; set; }
...
}
Then your partial will be like below :
#model my.path.to.namespace.BaseModel
#Html.TextBoxFor(m => m.ComplexModel.Name)
If this is not an acceptable solution, you may have to think in terms of overriding the model binder. You can read about that here.
I came across the same situation and with the help of such informative posts changed my partial code to have prefix on generated in input elements generated by partial view
I have used Html.partial helper giving partialview name and object of ModelType and an instance of ViewDataDictionary object with Html Field Prefix to constructor of Html.partial.
This results in GET request of "xyz url" of "Main view" and rendering partial view inside it with input elements generated with prefix e.g. earlier Name="Title" now becomes Name="MySubType.Title" in respective HTML element and same for rest of the form input elements.
The problem occurred when POST request is made to "xyz url", expecting the Form which is filled in gets saved in to my database. But the MVC Modelbinder didn't bind my POSTed model data with form values filled in and also ModelState is also lost. The model in viewdata was also coming to null.
Finally I tried to update model data in Posted form using TryUppdateModel method which takes model instance and html prefix which was passed earlier to partial view,and can see now model is bound with values and model state is also present.
Please let me know if this approach is fine or bit diversified!
I know it would be a basic question but I'm a newbie to ASP.Net MVC. I have fetched data from database using LINQ but there is an issue. I wanna bind that data with input fields of a customized webform. (I'm using MVC). I wanna populate the input fields of webform with fetched data. I'm using EF Database first approach.
My Controller and view is attached.
Controller ActionMethod
public class HomeController : Controller
{
public ActionResult Index()
{
AutoRTGSEntities_1 dc = new AutoRTGSEntities_1();
//dc.policies.Where(cb => cb.Section_Key.Contains("SenderBIC"));
return View(dc.policies.Where(cb => cb.Policy_Section.Contains("RTGS")).ToList()); //get RTGS policy section data
}
}
View
#model IEnumerable<Swift_MT_103.policy>
#{
ViewBag.Title = "Home Page";
}
<div> #Model{ #Html.TextBoxFor(x => x.data_Value)) } </div>
<div> <input type="text" name="ReceiverBIC" id="ReceiverBIC" /> </div>
Rest is HTML and CSS. Snap is attached.
Here's a very basic example of how to this. Let's say you have following class:
public class User
{
public int Id { get; set; }
[Display(Name = "Name")]
public string Name { get; set; }
[Display(Name = "E-mailaddress")]
public string E-mail { get; set; }
}
In the controller you get the user:
public ActionResult Index(int id)
{
var user = Db.Users.FirstOrDefault(x => x.Id == id);
if(user != null)
{
return View(user);
}
//Return to the 'Error' view as no user was found
return View("Error");
}
You also need a View to show everything on screen. Make it a strongly typed view, this way you can pass a Model to it. This class will hold all data you want to pass to the view. Code of the view:
//This line lets the view know which class represents the model
#model User
#Html.LabelFor(m => m.Name)
#Html.TextBoxFor(m => m.Name)
#Html.LabelFor(m => m.Name)
#Html.TextBoxFor(m => m.Name)
Using the Razor syntax instead of plain HTML it is very easy to construct and bind your form elements to the corresponding data. In this case the label will show the value of the Display attribute in the User class and the values of the user will be filled in the textboxes.
More reading:
Getting started with ASP.NET MVC 5
ASP.NET MVC Overview
Update:
In case you have a list of objects, you need to enumerate them in the view:
#model IEnumerable<string>
#foreach (var value in Model)
{
<div>#value</div>
}
And if the model is a class and has a property that is a list:
//Let's say a user has lots of names
public class User
{
public int Id { get; set; }
public List<string> Names { get; set; }
}
//View:
#model User
#Html.TextBoxFor(m => m.Id)
#foreach (var name in Model.Names)
{
<div>#name</div>
}
Try to implement a correct ASP.NET MVC architecture. To get this completed, you'll need to use proper Razor (.cshtml type) Syntax in your Views. Best practice:
Create a dedicated ViewModel class in the Model directory. You might call it CustomerCreditTransferViewModel for example. It should contain all Properties you want to display/edit anywhere on the page.
Once you selected your data from your DBContext in your Action, create an instance of CustomerCreditTransferViewModel and populate all fields from the result.
Update your View to use #model CustomerCreditTransferViewModel instead of Swift_MT_103.policy (believe me, this is going to make your live much easier in future)
Copy-paste your raw HTML Code into the page and start looking for all Fields you want to bind, e.g. Text fields (<input type="text" name="accountno" value="" />) and replace them with the Razor Syntax for Data Binding (#Html.TextBoxFor(x => x.AccountNo)). If done correctly, they should be populated now.
Next step is probably the POST. Follow the base MVC Post technique from the Tutorials. Ensure that the Posted Value is of type CustomerCreditTransferViewModel) again, so you can easily validate values and map back to type of Swift_MT_103.policy.
This question already has answers here:
getting the values from a nested complex object that is passed to a partial view
(4 answers)
Closed 6 years ago.
This question has been asked but none could solve my problem.
The problem is missing or null data from the partial view is not submittied (POST) along with the main view data.
I have a typed partial view called _Address.cshtml that I include in another view called Site.cshtml.
The typed site view binds to a view model called SiteEditModel.cs
public class SiteEditModel
{
...properties
public AddressEditModel Address {get;set;}
public SiteEditModel()
{
Address = new AddressEditModel();
}
}
The Site view has a form:
#model Insight.Pos.Web.Models.SiteEditModel
...
#using ( Html.BeginForm( "Edit", "Site", FormMethod.Post ) )
{
#Html.HiddenFor( m => m.SiteId )
...
#Html.Partial( "~/Views/Shared/Address.cshtml", this.Model.Address )
...
#Html.SaveChangesButton()
}
The partial Address view is just a bunch of #Html... calls that bind to the Address model.
#model Insight.Pos.Web.Models.AddressEditModel
#{
Layout = null;
}
<div>
#Html.HiddenFor(...)
#Html.HiddenFor(...)
#Html.HiddenFor(...)
#hmtl.LabelFor(...)
</div>
In the controller action Edit I can see the SiteEditModel is populated correctly, the Address property of that model is not.
Where do I go wrong?
Thank you so much.
http://davybrion.com/blog/2011/01/prefixing-input-elements-of-partial-views-with-asp-net-mvc/
#Html.Partial("~/Views/Shared/_Address.cshtml", Model.Address, new ViewDataDictionary
{
TemplateInfo = new System.Web.Mvc.TemplateInfo { HtmlFieldPrefix = "Address" }
})
The key to fix this is with naming of the partialviews input-elements. The Render partial dont know it's a part of something bigger.
I've make an simple example on how you can fix this in a way that you can have multiple Addresses using the same partial view:
public static class HtmlHelperExtensions
{
public static MvcHtmlString PartialWithPrefix(this HtmlHelper html, string partialViewName, object model, string prefix)
{
var viewData = new ViewDataDictionary(html.ViewData)
{
TemplateInfo = new TemplateInfo
{
HtmlFieldPrefix = prefix
}
};
return html.Partial(partialViewName, model, viewData);
}
}
And use this extensions in the view like this:
#using (Html.BeginForm("Edit", "Site", FormMethod.Post))
{
#Html.HiddenFor(m => m.SiteId)
#Html.PartialWithPrefix("_Adress", this.Model.Address, "Address")
<input type="submit" />
}
You can of course make this a bit more fancy with expressions and reflection but that's another question ;-)
Your SiteEditModel Address property is not marked as public, change it to this instead:
public AddressEditModel Address {get;set;}
I would also change your partial to use SiteEditModel instead:
#model Insight.Pos.Web.Models.SiteEditModel
#{
Layout = null;
}
<div>
#Html.HiddenFor(m => m.Address.FooProperty)
...
</div>
This would mean that your properties would end up being named correctly in order for the model binder to pick them up.
Using the above example it would be Name"=Address.FooProperty".
As I remember correctly, the problem is that Html.Partial doesn't populate inputs names correctly. You should have something like:
<input id="Address.Street" name="Address.Street" />
but I assume you have following HTML:
<input id="Street" name="Street" />
You have few solutions:
Insert input name manually:
#Html.HiddenFor(x => x.Street, new { Name = "Address.Street" })
Use Html.EditorFor()
Override names resolving in Html.Partial()
The downside of first solution is that you are hardcoding property name, what isn't ideal. I'd recommend using Html.EditorFor() or Html.DisplayFor() helpers, cause they populate inputs names correctly.
Model binder could not bind child models correctly if you are populating them in partial view. Consider using editor templates instead which is implemented for this reason.
Put your AddressEditModel.cshtml file in \Views\Shared\EditorTemplates\ folder and in your main view use like this:
#using ( Html.BeginForm( "Edit", "Site", FormMethod.Post ) )
{
// because model type name same as template name MVC automatically picks our template
#Html.EditorFor(model=>model.Address)
// or if names do not match set template name explicitly
#Html.EditorFor(model=>model.Address,"NameOfTemplate")
}
I am using nested view models to display views based on user roles.
Model:
public class MainVM {
//some properties
public OneVM One {get; set;}
public TwoVM Two {get; set;}
}
public class OneVM {
//properties
}
public class TwoVM {
//properties
}
As written here that only main model is need to be sent controller. I am using Automapper to map properties from received model.
Controller:
public ActionResult EditAction(MainVM model){
var item = db.Table.Find(model.Id);
//automapper to map
AutoMapper.Mapper.Map(model.One, item); //does not work
db.Entry(item).State = EntityState.Modified;
db.SaveChanges();
}
Is this the right way to do that? What am I doing wrong here.
Update:
This was the view I was using to render nested view models from partial views
View:
#model MainVM
#Html.RenderPartial("_OnePartial", Model.One)
This answer https://stackoverflow.com/a/6292180/342095 defines an Html helper which will generate the partial view with right names.
The value of property One will be empty because you are passing an instance of OneVM to the partial (not the main model) so the form controls are not correctly named with the prefix (which need to be name="One.SomeProperty").
You have included a link to a PartialFor() helper (which works) but don't use it. In the main view it needs to be
#Html.PartialFor(m => m.One, "_OnePartial")
Which is the equivalent of
#Html.Partial("_OnePartial", Model.One,
new ViewDataDictionary { TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "One" }})
The problem probably lies in your HTML. If a model is nested, then the input fields of properties should be like this:
<input type="text" name="SubModel.PropertyName" />
Using HTML helpers, it would look something like this:
#Html.EditorFor(model => model.SubModel.PropertyName)
The ASP.NET MVC Action cannot know, that you want to fill your submodel if it's not in your HTML.
I have a dynamic view, this will display any model that has been passed to it.
#model dynamic
#using (Html.BeginForm("Edit", null, FormMethod.Post, new { id="FrmIndex" }))
{
#Html.ValidationSummary(true);
#Html.EditorForModel()
<input type="submit" value="Edit" />
}
Say one of my model is PartyRole
public partial class PartyRole
{
[Key, Display(Name = "Id"]
[UIHint("Hidden")]
public int PartyRoleId { get; set; }
[UIHint("TextBox")]
public string Title { get; set; }
}
I dont want to show Id in edit mode, so I am hiding it in Hidden.cshtml editorfortemplate as below:
#Html.HiddenFor(m => Model)
This is hiding the editor, but not the label "Id".
And I cannot use the answers provided here, How to exclude a field from #Html.EditForModel() but have it show using Html.DisplayForModel()
because IMetadataAware requires System.Web.Mvc namespace which I cannot add in my Biz projects that are having the poco model classes.
I cannot use [HiddenInput(DisplayValue = false)] also because this is also party of web.mvc
can somebody give a solution??
I think that the thing to do is create a custom Object.cshtml editor template, as described in
http://www.headcrash.us/blog/2011/09/custom-display-and-editor-templates-with-asp-net-mvc-3-razor/
(nb. I found How to add assembly in web.config file of mvc 4 to be helpful with the System.Data.EntityState reference.)
Within that template you can put appropriate code to hide the label. The following is a dumb example - I guess that I'd probably try to pick up a custom attribute, though apparently this would involve an overload of DataAnnotationsModelMetadataProvider.
if (prop.HideSurroundingHtml)
{
#Html.Editor(prop.PropertyName)
}
else if (prop.PropertyName == "PartyRoleId")
{
<div></div>
}
else if (!string.IsNullOrEmpty(Html.Label(prop.PropertyName).ToHtmlString()))
{
<div class="editor-label">#Html.Label(prop.PropertyName)</div>
}