I have Index.cshtml with the code below
#model IEnumerable<Demo.Models.RequestList>
....
#foreach (var item in Model)
{
<td>#Html.DisplayFor(modelItem => item.Name)</td>
...
<a class="dropdown-item" onclick="edit(#item.ID)" href="#Url.Action("Edit", "Home", new { id = item.ID })">Edit</a>
}
It mean, I get data from DB and show on the table. Each row of the table I create a button for edit.
When I click Edit button, it will href="#Url.Action("Edit", "Home", new { id = item.ID })
But now, I want create Edit modal or a #html.partial on the Modal instead of href to a new page. How can I do that?
It is my Edit code.
#model Demo.Models.RequestList
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>RequestList</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.ID)
<div class="form-group">
#Html.LabelFor(model => model.Code, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Code, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Code, "", new { #class = "text-danger" })
</div>
</div>
....
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
Related
The file "Add.cshtml" is calling the partial view "_ManagePartial.cshtml" and passing the "Model""however the "Model " is not being picked up in the partial view.
When I include the code that's on the partial view into "Add.cshtml" everything works great.
Please advise what I''m doing wrong.
Error Message:
Click here to see the error message screenshot
File: _ManagePartial.cshtml
<div class="row">
<div class="col-md-4">
<div class="form-group">
#Html.LabelFor(model => model.UserName)
#Html.EditorFor(model => model.UserName, new { htmlAttributes = new { #class = "form-control input-lg" } })
#Html.ValidationMessageFor(model => model.UserName, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.UserPassword)
#Html.EditorFor(model => model.UserPassword, new { htmlAttributes = new { #class = "form-control input-lg" } })
#Html.ValidationMessageFor(model => model.UserPassword, "", new { #class = "text-danger" })
</div>
<div class="form-group"><button type="submit" class="btn btn-primary btn-lg">Submit</button></div>
</div>
<div class="col-md-4">
<div class="form-group">
#Html.LabelFor(model => model.UserEmail)
#Html.EditorFor(model => model.UserEmail, new { htmlAttributes = new { #class = "form-control input-lg" } })
#Html.ValidationMessageFor(model => model.UserEmail, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.UserConfirmPassword)
<input type="password" class="form-control input-lg" name="UserConfirmPassword">
</div>
</div>
</div>
File: Add.cshtml
#model CardDistro.Models.AddUserViewModel
#{
ViewBag.Current = "Users#Index";
String Action = ViewBag.FormAction;
}
<h2 class="page-header">#ViewBag.Title</h2>
#using (Html.BeginForm(Action, "Users", FormMethod.Post, new { id = "SiteAddUserContainer" }))
{
<input type="hidden" name="UserID" value="#Model.UserID" />
if (ViewBag.Retval != null){
<div class="row"><div class="col-md-8"><div class="alert alert-danger">#ViewBag.Retval</div></div></div>
}
Html.RenderPartial("_ManagePartial", Model);
}
_ManagePartial.cshtml needs to identify the model by starting the partial view with
#model CardDistro.Models.AddUserViewModel
so the compiler knows what to do with model=>UserName
i am bit new in asp.net mvc. i am facing problem for very basic things that my Partial view not rendering. here is the details
i have a main page and one partial view
main page action look like
public ActionResult Index()
{
return View();
}
main index view look like
#model Testing.Models.Employee
#{
ViewBag.Title = "Home Page";
}
<div class="row">
</div>
<div class="row">
<div id="formsIndex">
#{
Html.Partial("_TestForm");
}
</div>
</div>
#section scripts {
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
}
here i am showing a partial view like this way Html.Partial("_TestForm"); but no UI comes for partial view.
partial view code look like
#model Testing.Models.Employee
#using (Ajax.BeginForm("Index", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "formsIndex" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.City, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.City, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.City, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Address, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Address, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Address, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</div>
</div>
}
when i pass model to partial view this way Html.Partial("_TestForm", Model); then also no UI comes.
please tell me where i made the mistake ?
use in method return PartialView() and try this
#Html.Partial("_TestForm");
Using Html.Partial inside a #{ ... } block will just call the method and throw the result away.
You should call it outside of a #{ ... } block, prefixed with #, and remember to pass in the model:
<div id="formsIndex">
#Html.Partial("_TestForm", Model);
</div>
Render like this
#Html.Action("_Partialview", "controllerName")
also create action methode of partial view
public ActionResult _Partialview
{
Employee _objModel= new Employee ()
return PartialView(_objModel);
}
I want pass some Id's values from my Edit form.
Let say I want pass value of ProductId, CountryId and ModelId and I tried like this:
<input type="submit" value="Save" class="btn btn-default" onclick="return Update(#(model.ProductId),#(model.CountryId),#(model.ModelId) )/>
But not working.
I'am in my Edit form and this is my form.
#model Products.Models.Product
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Product</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.ProductId)
#Html.HiddenFor(model => model.CountryId)
#Html.HiddenFor(model => model.ModelId)
<div class="form-group">
#Html.LabelFor(model => model.ProductName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ProductName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Model, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Model, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Model, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Model, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Status, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Status, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Status, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" onclick="return Update(#(model.ProductId),#(model.CountryId),#(model.ModelId) )/>
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
Thank you!
<input type="submit" value="Save" class="btn btn-default" onclick="return Update(#Model.ProductId,#Model.CountryId,#Model.ModelId)/> And you will get all three Values. Happy coding!
I have a view that contains 2 partial views.
#model ListViewModel
....
#{
Html.RenderPartial("EditCartItemsPartical");
Html.RenderPartial("ShowProductINFO", Model.Products);
}
and I just want to create a from with the first partial, and a list with the second.
The partial views
EditCartItemsPartical.cshtml
#model TestNewATM3._0.Models.CartItem
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<div class="form-group">
#Html.LabelFor(model => model.CartId, "CartId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CartId, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CartId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ProductId, "ProductId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ProductId, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ProductId, "", new { #class = "text-danger" })
</div>
</div>
.... // more control for CartItem
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
ShowProductINFO.cshtml
#model IEnumerable<TestNewATM3._0.Models.AllProduct2>
<p>#Html.ActionLink("Create New", "Create")</p>
<table class="table">
<tr>
<th>ID</th>
<th>#Html.DisplayNameFor(model => model.Title)</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>#Html.DisplayFor(model => item.Id)</td>
<td>#Html.DisplayFor(modelItem => item.Title)</td>
</tr>
}
</table>
And in my controller I got this.
public ActionResult Edit()
{
var db = ApplicationDbContext.Create();
var list = new ListViewModel
{
Products = db.AllProduct2s.ToList(),
Users = db.Users.ToList(),
Cart = db.Carts.ToList(),
CartItem = db.CartItems.ToList()
};
return View(list);
}
But the problem is that I cant show both partial at the same time because if I send the list in my view, then my first partial gets a problem cause it want a #model TestNewATM3.0.Models.CartItem. but if I don't sent the list My list wont show because I don't send it.
So how do i show a normal partial form view and a List partial view at the same time?
I'm having a little difficulty understanding your examples (i.e you have an edit view with create buttons), it looks like your trying to create a view to edit the cart.
Note: I would suggest renaming the CartItem property of your model to CartItems for clarity, but I'll use the current property names for the examples below.
You could render the partial view for each of the items in the list like so,
but this approach more is more than a little messy:
foreach(var cartItem in Models.CartItem){
Html.RenderPartial("EditCartItemsPartical", cartItem);
}
A simpler and more performant approach would be to edit the first view so it takes a collection of cart items
Like so
#model IEnumerable<TestNewATM3._0.Models.CartItem>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#foreach(var modelItem in Model.CartItem){
<h4>CartItem</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => modelItem.CartId, "CartId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => modelItem.CartId, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => modelItem.CartId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ProductId, "ProductId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => modelItem.ProductId, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => modelItem.ProductId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Aantal, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => modelItem.Aantal, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => modelItem.Aantal, "", new { #class = "text-danger" })
</div>
</div>
}
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
Of course this will require you to change the server side code to receive a collection of cart items, but from the user's perspective not having to post a form back multiple times, to complete your changes is going to result in a better experience.
disclaimer: I changed the above view in notepad, might need to adjust a bit before it works perfectly
I hope this helps.
In a MVC 5 application, I have a partial view with a button to submit some information. But when I push that button the parent form is validated, making all the validating errors displayed. All I want is that only the validated fields in the partial view are executed with no interaction with the parent form.
Code update (partial view, UploadFile):
<form action="#Url.Action("Upload","File")" method="post" enctype="multipart/form-data">
<label for="photo">Photo:</label>
<input type="file" name="photo" id="photo" />
<input type="submit" value="Upload" />
</form>
Code parent form:
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.CategoriaId, "CategoriaId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("CategoriaId", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.CategoriaId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Titulo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Titulo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Titulo, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Descripcion, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Descripcion, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Descripcion, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Precio, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Precio, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Precio, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
#Html.Partial("UploadFile")
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
Since you have a <form> tag inside the partial view and you put #Html.Partial("UploadFile") inside #using (Html.BeginForm()) block like below
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
....
....
....
#Html.Partial("UploadFile")
}
It will be rendered as nested forms like this
<h2>Create</h2>
<form>
....
....
....
<form action="/File/Upload" method="post" enctype="multipart/form-data">
<label for="photo">Photo:</label>
<input type="file" name="photo" id="photo" />
<input type="submit" value="Upload" />
</form>
</form>
which is invalid html. You need to move #Html.Partial("UploadFile") outside of #using (Html.BeginForm()) block
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
....
....
....
}
#Html.Partial("UploadFile")
This may cause due to nested form.
Make sure that child form is not nested inside another form.
the HTML specs forbid nested forms.
#using (Html.BeginForm())
{
..
}
#Html.Partial("UploadFile") // place it outside of main form
As partial view contain another form you need to place it outside of main form anotherwise it will be nesting(HTML specs forbid nested forms)