My view is divided into partial views. Hence, at the time of submission my model isn't reconstructed correctly.
The page view displays employee data, where Employee.Contactinfo is the model of _contactInfo partial view, which again has a partial view _phoneInfo to render phone info having model Employee.ContactInfo.PhoneInfo.
Now the problem is with the name of properties. Employee.ContactInfo.PhoneInfo.Contact1 at the time of rendering has name "Contact1", hence at the time of submission the model isn't created appropriately, I get primitive data of Employee but complex type like ContactInfo is null.
I think the solution is to add the prefix at the time of rendering the partial view. How can I perform the following in MVC 6?
employee.cshtml
#model Employee
<% Html.RenderPartial("_conctactInfo", Model.ContactInfo, new ViewDataDictionary
{
TemplateInfo = new System.Web.Mvc.TemplateInfo { HtmlFieldPrefix = "ContactInfo" }
})
%>
_contactInfo.cshtml
#model ContactInfo
<% Html.RenderPartial("_phoneInfo", Model.PhoneInfo, new ViewDataDictionary
{
TemplateInfo = new System.Web.Mvc.TemplateInfo { HtmlFieldPrefix = "PhoneInfo" }
})
%>
_phoneInfo.cshtml
#model PhoneInfo
<input asp-for="#Model.Contact1" />
Here is the solution,
namespace Website1.Extensions
{
public static class HtmlHelper
{
public static IHtmlContent Partial(this IHtmlHelper htmlHelper, string partialViewName, object model, string prefix)
{
var viewData = new ViewDataDictionary(htmlHelper.ViewData);
var htmlPrefix = viewData.TemplateInfo.HtmlFieldPrefix;
viewData.TemplateInfo.HtmlFieldPrefix += !Equals(htmlPrefix, string.Empty) ? $".{prefix}" : prefix;
return htmlHelper.Partial(partialViewName, model, viewData);
}
public static Task<IHtmlContent> PartialAsync(this IHtmlHelper htmlHelper, string partialViewName, object model, string prefix)
{
var viewData = new ViewDataDictionary(htmlHelper.ViewData);
var htmlPrefix = viewData.TemplateInfo.HtmlFieldPrefix;
viewData.TemplateInfo.HtmlFieldPrefix += !Equals(htmlPrefix, string.Empty) ? $".{prefix}" : prefix;
return htmlHelper.PartialAsync(partialViewName, model, viewData);
}
}
}
employee.cshtml
#using Website1.Extensions;
#model Employee
#Html.Partial("_contactInfo", Model.ContactInfo, nameof(Model.ContactInfo))
_contactInfo.cshtml
#using Website1.Extensions;
#model ContactInfo
#Html.Partial("_phoneInfo", Model.PhoneInfo, nameof(Model.PhoneInfo))
_phoneInfo.cshtml
#model PhoneInfo
<input asp-for="#Model.Contact1" />
If you only need this once this would be the quick solution for the _contactInfo partial view
employee.cshtml
#{
var viewData = new ViewDataDictionary(ViewData);
viewData.TemplateInfo.HtmlFieldPrefix = "ContactInfo";
}
<partial name="_conctactInfo" model="Model.ContactInfo" view-data="#viewData"/>
Related
I am student. I am new to ASP.NET MVC and I google it and I tried see I write all code but viewbag not properly working
I am transferring data and using the viewing but not transferring the dropdown value
type.cs
public class Type
{
//public int Value { get; set; }
//public string Text { get; set; }
public int typeid { get; set; }
public string typename { get; set; }
}
public class TypeViewModel
{
//public List<Type> TypeDetaills { get; set; }
public SelectList TypeList { get; set; }
}
HomeControlle.cs
TypeViewModel TypeViewModel = new TypeViewModel();
public ActionResult Index()
{
SqlCommand cmd = new SqlCommand("getType", cn);
cmd.CommandType = CommandType.StoredProcedure;
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
cn.Open();
da.Fill(ds);
DataTable dt = ds.Tables[0];
List<Type> objcountry = new List<Type>();
SelectList objlistofcountrytobind = new SelectList(dt.AsDataView(), "typeid", "typename", 0);
TypeViewModel.TypeList = objlistofcountrytobind;
ViewBag.typename = TypeViewModel.TypeList;
cn.Close();
return View();
}
[HttpPost]
public ActionResult CreateCustomer(Customer customer,string TypeList)
{
customer.Type = TypeList;
customer.CustomerName = cust;
return RedirectToAction("Index");
}
Index.cshtml
#model projectname.Models.TypeViewModel
#{
ViewBag.Title = "Index";
//var t = ViewBag.typename;
}
<h2>Type Query</h2>
#using (Html.BeginForm("CreateCustomer", "Home", FormMethod.Post, new { TypeList = #ViewBag.typename }))
{
<div class="form-group">
<div class="row">
<label>Type Name:</label>
#Html.DropDownListFor(model => model.TypeList, ViewBag.typename as SelectList)
#*#Html.Hidden("TypeList", #ViewBag.typename);*#
#*#Html.HiddenFor("TypeList", #ViewBag.typename);*#
#*#Html.HiddenFor(x => x.TypeList)*#
#*<input type="hidden" value="#ViewBag.typename" />*#
#*#Html.DropDownList("typeid", t as SelectList)*#
#*#Html.DropDownListFor(x => x.typename, new SelectList((IEnumerable<Type>)t, "typeid", "typename"))*#
</div>
</div>
<div class="form-group">
<div class="row">
<label>Customer Name:</label>
<input type="text" id="cust" name="cust" />
</div>
</div>
<input type="submit" />
}
see i select the runtime warranty from the drop down
I am trying to pass controller warranty not 2
see stored procedure getType fill this stored procedure in dropdown
I tried hiddenfor attribute but it not work
I want the pass warranty to createcustomer controller not 2
please help
Before trying to create code, you have to learn that the first letter in MVC is for model. So you have forget that viewbag is even exist. Create a view model , assign data and pass it from the action and use it inside of the view
TypeViewModel.TypeList = objlistofcountrytobind;
return View (TypeViewModel)
and you can only assign as a hidden (or not hidden) the primitive types (as string or int) not the whole instanse of the class
Pass text and value field same, if you want the text field to be posted back to the controller action method. By default dropdownlist uses value field.
Change that line!
SelectList objlistofcountrytobind = new SelectList(dt.AsDataView(), "typename", "typename", 0);
You can modify your view model as described in the following post: How to get DropDownList SelectedValue in Controller in MVC.
Or you can use the JavaScript:
#Html.DropDownListFor(model => model.TypeList,
ViewBag.type_name as SelectList,
new { onchange=" { var ddltext = $(`#TypeList option:selected`).text();$('#textvalue').val(ddltext);}" })
#Html.Hidden("typeList", "")
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
In certain cases I want to display SelectList object not using DropDownListFor helper. Instead, I want to create a helper that iterates over the SelectListItems, and draw something different.
I have created an EditorTemplate:
#model RadioButtonOptions
<div class=" switch-field noselect" style="padding-left: 0px;">
#foreach (SelectListItem op in Model.Values.Items)
{
var idLabelF = ViewData.TemplateInfo.GetFullHtmlFieldId("") + "_" + op.Value;
var esChecked = "";
if (op.Selected)
{
esChecked = "checked";
}
<input type="radio" id="#idLabelF" name="#(ViewData.TemplateInfo.GetFullHtmlFieldName(""))" value="#op.Value" #esChecked />
<label for="#idLabelF" style="width: 100px;">#op.Text</label>
}
</div>
The RadioButtonOptions class is a ViewModel:
public class RadioButtonOptions
{
public SelectList Values { get; set; }
}
The final resul looks like this:
My ViewModel is like this (simplified):
public class MainVisitVM
{
public MainVisit Visit { get; set; }
public RadioButtonOptions VisitOptions { get; set; }
}
And I use it in Razor View as:
<div class="clearfix">
#Html.LabelFor(x=> x.Visit.Tipo)
<div class="input">
#Html.EditorFor(x=> x.VisitOptions ) //HERE
</div>
</div>
The problem I have is that I want this to work more like the DropDownListFor, so the lamda expresion I pass is the property holding the selected value, and then just pass the SelectList object (or a custom list).
<div class="clearfix">
#Html.LabelFor(x=> x.Visit.Tipo)
<div class="input">
#Html.CustomDropDownListFor(x=> x.Visit.Tipo, Model.VisitOptions ) //This would be ideal!!
</div>
</div>
So, I think doing this using EditorTemplates will not be possible.
Any idea in how to accomplish this?
Thanks to #StephenMuecke suggestion, I ended up with this HtmlHelper extension method:
public static MvcHtmlString RadioButtonForSelectList<TModel, TProperty>(
this HtmlHelper<TModel> htmlHelper,
Expression<Func<TModel, TProperty>> expression,
SelectList listOfValues)
{
string htmlFieldName = ExpressionHelper.GetExpressionText(expression);
if (listOfValues == null) return MvcHtmlString.Create(string.Empty);
var wrapperDiv = new TagBuilder("div");
wrapperDiv.AddCssClass("switch-field noselect");
wrapperDiv.Attributes.Add("style", "padding-left: 0px;");
var sb = new StringBuilder();
foreach (SelectListItem item in listOfValues)
{
var idLabelF = htmlFieldName.Replace(".","_") + "_" + item.Value;
var label = htmlHelper.Label(idLabelF, item.Text, new { style = "width: 100px;" }).ToHtmlString();
var radio = htmlHelper.RadioButtonFor(expression, item.Value, new { id = idLabelF }).ToHtmlString();
sb.AppendFormat("{0}{1}", radio, label);
}
wrapperDiv.InnerHtml = sb.ToString();
return MvcHtmlString.Create(wrapperDiv.ToString());
}
Not particulary proud of my htmlFieldName.Replace(".","_"), but works.
This question already has answers here:
Refactor similar CHTML that renders varying properties using EditorFor and LabelFor
(2 answers)
Closed 6 years ago.
I am building an app with ASP.NET MVC and Bootstrap. In my app, I have a view with a Model that looks like this:
public class EntryModel
{
[Required(ErrorMessage="Please enter the name.")]
[Display(Name="Name")]
public string Name { get; set; }
[Required (ErrorMessage="Please enter the description.")]
[Display(Name = "Description")]
public string Description { get; set; }
}
In this app, I've also defined a custom html helper that looks like this:
public static class MyHelpers
{
public static MvcHtmlString MyTextBox(this HtmlHelper helper)
{
var sb = new StringBuilder();
sb.Append("<div class=\"form-group\">");
sb.Append("<label class=\"control-label\" for=\"[controlId]\">[labelValue]</label>");
sb.Append("<input class=\"form-control\" id=\"[controlId]\" name=\"controlId\" type=\"text\" value=\"[propertyValue]\">");
sb.Append("</div>");
return MvcHtmlString.Create(sb.ToString());
}
}
I'm using this helper and model in my Razor view, like this:
#model EntryModel
<h2>Hello</h2>
#using (Html.BeginForm("Add", "Entry", new {}, FormMethod.Post, new { role="form" }))
{
#Html.MyTextBox()
}
I am trying to generate the labelValue, controlId, and propertyValue values in the helper from the properties of the Model. For example, I'd like to use #Html.MyTextBoxFor(m => m.Name) and have the helper generate something like this:
<div class="form-group">
<label class="control-label" for="Name">Name</label>");
<input class="form-control" id="Name" name="Name" type="text" value="Jon">
</div>
Essentially, I'm not sure how to get my model information into my html helper.
Use this example as reference:
public static MvcHtmlString AutoSizedTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression)
{
var attributes = new Dictionary<string, Object>();
var memberAccessExpression = (MemberExpression)expression.Body;
var stringLengthAttribs = memberAccessExpression.Member.GetCustomAttributes(
typeof(System.ComponentModel.DataAnnotations.StringLengthAttribute), true);
if (stringLengthAttribs.Length > 0)
{
var length = ((StringLengthAttribute)stringLengthAttribs[0]).MaximumLength;
if (length > 0)
{
attributes.Add("size", length);
attributes.Add("maxlength", length);
}
}
return helper.TextBoxFor(expression, attributes);
}
And you can call it in the view like this:
#Html.AutoSizedTextBoxFor(x => x.Address2)
I'm running into a problem with the ModelState already having errors when getting a PartialView using #Html.Action().
I have the following controller:
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web.Mvc;
public class TestController : Controller
{
private readonly object[] items = {new {Id = 1, Key = "Olives"}, new {Id = 2, Key = "Tomatoes"}};
[HttpGet]
public ActionResult Add()
{
var model = new ViewModel {List = new SelectList(items, "Id", "Key")};
return View(model);
}
public ActionResult _AddForm(ViewModel viewModel)
{
var errors = ModelState.Where(m => m.Value.Errors.Count > 0).ToArray();
return PartialView(viewModel);
}
}
And the following ViewModel:
public class ViewModel
{
[Required]
public int? SelectedValue { get; set; }
public SelectList List { get; set; }
}
The Add view looks like this:
#model ViewModel
<h1>Add a thing to a list</h1>
#using (Html.BeginForm())
{
#Html.ValidationSummary()
#Html.Action("_AddForm", Model)
<button class="btn btn-success">Submit</button>
}
Finally the _AddForm PartialView looks like this:
#model ViewModel
<div class="form-group">
#Html.ValidationMessageFor(m => m.SelectedValue)
#Html.LabelFor(m => m.SelectedValue, "Please select a thing:")
#Html.DropDownListFor(m => m.SelectedValue, Model.List, new {#class = "form-control"})
</div>
When this page loads the ModelState already has an error in the PartialView because the SelectedValue is required.
I don't understand why this happens, surely the _AddForm action is a HTTP GET and does not cause model state validation?
(Note, I don't want to use #Html.Partial() because I need to do some logic in the Action.)
The reason this occurs is that passing the strongly typed ViewModel as a parameter to the action causes the model binding and validation to occur again.
There seems to be no way to avoid this re-validation.
I originally attempted to use the Action as a way to get around the way MVC seemed to be caching some information about my ViewModel when using Html.Partial().
This "caching" turned out to be in the ModelState: https://stackoverflow.com/a/7449628/1775471
I have a view which contains a dropdown list and on dropdownlist item being selected I load a partial view. And when the form is submitted I want to be able to get both the values from main view and partial view during form submit.
Here is the main view
#model AdminPortal.Areas.Hardware.Models.CreateModule
#{
ViewBag.Title = "Create Module";
Layout = "~/Views/shared/_BootstrapLayout.basic.cshtml";
}
#Html.ValidationSummary(true)
<fieldset class="form-horizontal">
<legend>Add a Module <small>Create</small></legend>
#using (Html.BeginForm("CreateModule", "Module", new{id="AddModuleForm"}))
{
#Html.ValidationSummary(true)
<div class ="controls">
<div class="input-block-level">#Html.TextBoxFor(model => model.ModuleId, new {#placeholder = "ModuleID"})</div>
<br/>
<div class ="input-block-level" id="selectedModuleTypeName">#Html.DropDownListFor(model => model.SelectedModuleTypeName, Model.TypeNames,"Select Moduletype", new{id = "ModuleList"})</div>
<br/>
<div id="partialDiv"></div>
</div>
<div class="form-actions" id="buttons">
<button type="submit" class="btn btn-primary" id="Submit">Save changes</button>
#Html.ActionLink("Cancel", "ModuleList", null, new { #class = "btn " })
</div>
}
</fieldset>
<div>
#Html.ActionLink("Back to List", "ModuleList")
</div>
<script>
$("#buttons").hide();
$("#ModuleList").on("change", function() {
var modId = $(this).val();
$.get('#Url.Action("GetModulePropertyName", "Module")', { moduleTypeValue: modId }, function(result) {
$("#partialDiv").html(result);
});
//uncomment following section to check if the partial view is working properly
/*.done(function() { alert("done"); })
.fail(function() { alert("fail"); })
.always(function() { alert("completed"); });*/
});
$("#buttons").show();
</script>
and here is the partial view
#model IEnumerable<string>
#foreach(var names in Model)
{
<div class="input-block-level">#Html.TextBoxFor(m=>names, new{Value="", placeholder=names})</div>
<br/>
}
Here is my model
public class CreateModule
{
//Empty form to handle form serialization
public CreateModule()
{
}
[Required]
public string ModuleId { get; set; }
[DataType(DataType.DateTime)]
public DateTime DateEntered { get; set; }
[Required]
public string SelectedModuleTypeName { get; set; }
public IEnumerable<SelectListItem> TypeNames { get; set; }
public List<Property> Properties { get; set; }
}
public class Property
{
public string Name { get; set; }
public string Value { get; set; }
}
Here is the method that script in main view forwards to
[HttpGet]
public ActionResult GetModulePropertyName(string moduleTypeValue)
{
var moduleKindId = _repository.GetModuleKindId(moduleTypeValue);
var modulePropertyNames = _repository.GetModuleKindPropertyNames(moduleTypeValue);
return PartialView("GetModulePropertyName",modulePropertyNames);
}
and finally here is httppost method for the main view
[HttpPost]
public ActionResult CreateModule(CreateModule moduleV)
{
var module = new Module
{
ModuleTypeId = Convert.ToInt64(moduleV.SelectedModuleTypeName),
ModuleId = moduleV.ModuleId,
DateEntered = moduleV.DateEntered,
};
if (ModelState.IsValid)
{
_repository.AddModule(module);
Success("Module added successfully!");
return RedirectToAction("ModuleList", "Module", new {area = "Hardware"});
}
Error("Something went wrong!");
return RedirectToAction("CreateModule", "Module", new { area = "Hardware" });
}
Current situation:
When the form is posted, the properties value of the model that is being passed via partial view is null. I get other values, like typename, Module ID.
What I'd want:
I also want to get the value of properties that is being passed via partial view.
You don't have any input field for the Properties property anywhere in your form. So it will always be null. That's normal.
Here's how you could proceed. Start by setting the correct navigational property so that the helper generates correct names of the corresponding input fields.
Also make sure that you are passing an IEnumerable<Property> model to the partial if you want to be able to get them back correctly:
[HttpGet]
public ActionResult GetModulePropertyName(string moduleTypeValue)
{
var moduleKindId = _repository.GetModuleKindId(moduleTypeValue);
IList<Property> model = ...
return PartialView("GetModulePropertyName", model.ToList());
}
and in your partial view use an editor template:
#model IList<Property>
#{
// This indicates the current navigational context to the helpers
ViewData.TemplateInfo.HtmlFieldPrefix = "Properties";
}
#Html.EditorForModel()
and the last step is to define a custom editor template for the Property class: ~/Views/Shared/EditorTemplates/Property.cshtml (note that the name and location of the template is important)
#model Property
<div class="input-block-level">
#Html.HiddenFor(m => m.Name)
#Html.TextBoxFor(m => m.Value, new { placeholder = Model.Name })
</div>
<br />
Try using the
List<Property>
as a model in your partial view and pass the CreateModule.Properties as model from your View
The problem is model binder can not figure out there
#Html.TextBoxFor(m=>names, new{Value="", placeholder=names})
belongs to as the "names" is not a property on your model class. If you need to bind to the CreateModule.Properties you need to change the partial view to emit textboxes with aproprate names, like this one:
#model IEnumerable<string>
#
{
int i=0;
}
#foreach(var names in Model)
{
<div class="input-block-level">#Html.TextBox("Properties[" + i + "].Value")</div>
<br/>
}