posting list to the controller from partial view - asp.net-mvc

I have a partial view, which generates rows dynamically and from where I want to submit the data to the controller. So I am binding the model properties with a list, but on httppost my list is always null.Using form collection I am able to get the data. How can I solve this issue?
<td data-title="Product Name">
<div class="row">
<div class="col-xs-10" style="padding-right:0px;">
<div class="form-group">
#Html.DropDownListFor(model => model._list[Model.id].detail_prod_id, Model._Product, "Please Select Product", new { #class = "chosen-select form-control", #id = "ddlproducts" + Model.id ,#Name= "ddlproducts" +Model.id})
#Html.ValidationMessageFor(model => model._list[Model.id].detail_prod_id, "", new { #class = "text-danger" })
</div>
</div>
<div class="col-xs-2" style="padding-right:25px; padding-left:5px;"><a class="popup-sm fancybox.iframe" href="../pages/add-product.html"><u>Add</u></a></div>
</div>
</td>

Try to put code inside form tag and then try..it may work.

Related

Using pagedlist with form parameters

I am using asp.net MVC 5 and Was wondering if there were any solutions out there that allowed me to use the PAGEDLIST library that can pass back input variables from the controller ALONG with passing back the .ToPagedList(pagenumber, pagesize) in the return view from the controller.
Here is the code i am working with:
In my Controller:
return View(tags.OrderBy(i => i.entry_no).ToPagedList(page ?? 1, 5));
In my View:
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 input-group input-daterange" id="datepicker" style="margin-right: 30px">
#Html.EditorFor(model => model.startDate, new { #class = "form-control" })
<div class="input-group-addon">to</div>
#Html.EditorFor(model => model.endDate, new { #class = "form-control" })
</div>
<div class="col-xs-1 input-group">
<span class="input-group-addon">Desk:</span>
#Html.DropDownListFor(model => model.SelectedDesk,
new SelectList(Model.DeskOptions, "Text", "Value", Model.SelectedDesk), new { #class = "selectpicker" })
</div>
</div>
</div>
[...]
Page #(Model.Tag.PageCount < Model.Tag.PageNumber ? 0 : Model.Tag.PageNumber) of #Model.Tag.PageCount
#Html.PagedListPager(Model.Tag, page => Url.Action("Index", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
So what i was hoping for was a way to update those editorfor/displayfor variables above along with passing back a pagedlist for table pagination.

How to redirect button that is inside Html.BeginForm

I have this View which displays 3 text boxes and a drop down list for displaying nationalities. The form itself works just fine, posts back to the controller and nothing is wrong. However what i want is, say a nationality is not present in the drop down and a user clicks a button which would redirect to a different page where they can add a nationality. Here is what i have so far:
#model WebApp.Models.ViewModels.AddPersonViewModel
<div class="container card">
#using (Html.BeginForm("AddPersonPost", "Persons", FormMethod.Post))
{
<form>
<div class="form-row">
<div class="col">
#Html.TextBoxFor(m => m.PersonModel.Name, new { #class = "form-control", #placeholder = "Name" })
</div>
<div class="col">
#Html.TextBoxFor(m => m.PersonModel.Relationship, new { #class = "form-control", #placeholder = "Relationship" })
</div>
<div class="col">
#Html.TextBoxFor(m => m.PersonModel.Comment, new { #class = "form-control", #placeholder = "Comment" })
</div>
<div class="col dropdown show">
#Html.DropDownListFor(m => m.PersonModel.Nationality, Model.NationalityList)
<input type="submit" class="btn-sm btn-primary mt-1" value="Add Nationality" onclick="window.location='#Url.Action("GetAll", "Persons")'">
</div>
</div>
<div class="m-sm-2">
<input type="submit" class="btn-sm btn-primary" value="Add Person">
</div>
</form>
}
</div>
I have tried the redirect option but when i click the button to add nationality it keeps going to the Action in the BeginForm, not to the intended Action in the button. So i was wondering 1. is this good practice to do what i am attempting to do? 2. How to go about it? Any help is appreciated.

How do I post varied length list to controller?

MVC4. I have a dynamic list on a view, a new textbox is added with button click (which adds a partialView) so user can enter a list of stuff. That is contained in a form element with a submit button.
In the controller I have tried three different types:
[HttpPost]
public ActionResult Index(IEnumerable<AccessoryVM> form)
{
-- form is NULL
[HttpPost]
public ActionResult Index(AccessoryVM form)
{
-- form has only the first item in the list
[HttpPost]
public ActionResult Index(FormCollection form)
{
-- seems to receive the list, but having trouble getting the values
All the examples I have seen are using a for list to add an index to each item, but they aren't using a dynamic list (it has a fixed length).
What should the Controller receiving type be?
EDIT to add more detail:
Button click appends partial view:
$("#add-item").on("click", function () {
$.ajax({
url: '/Accessory/AddItem',
cache: false,
success: function (html) {
$("#form-body").append(html);
}
})
return false;
})
Partial View:
#model EmployeeHardwareRequest.Models.ViewModels.AccessoryVM
<div class="form-group col-md-3">
#Html.LabelFor(model => model.ItemDescription, htmlAttributes: new { #class = "control-label" })
<div>
#Html.DropDownListFor(model => model.AccessoryId, Model.AccessoryDdl, new { #class = "form-control" })
</div>
</div>
<div class="form-group col-md-9">
#Html.LabelFor(model => model.ProductLink, htmlAttributes: new { #class = "control-label" })
<div>
#Html.EditorFor(model => model.ProductLink, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ProductLink, "", new { #class = "text-danger" })
</div>
</div>
Main View - partial is appended to the #form-body:
#using (Html.BeginForm("Index", "Accessory", FormMethod.Post, new { #id="accessory-form", #class = "form-horizontal" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div id="form-body">
<div class="form-group col-md-3">
#Html.LabelFor(model => model.ItemDescription, htmlAttributes: new { #class = "control-label" })
<div>
#Html.DropDownListFor(model => model.SelectedAccessory, Model.AccessoryDdl, new { #class = "form-control" })
</div>
</div>
<div class="form-group col-md-9">
#Html.LabelFor(model => model.ProductLink, htmlAttributes: new { #class = "control-label" })
<div>
#Html.EditorFor(model => model.ProductLink, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ProductLink, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button id="add-item" class="btn btn-primary">Add Another Item</button>
</div>
<div class="col-md-6">
<input type="submit" value="Select Software" class="btn btn-default pull-right" />
</div>
</div>
}
Most likely, you have a binding issue. Assuming all you're posting is a collection of AccessoryVM, then the parameter should be List<AccessoryVM> form. However, in order for the modelbinder properly bind the posted values, your input names must be in a specific format, namely either form[N].Foo or just [N].Foo.
You haven't given any detail about what's going on in your view, but since these are dynamically added, you must be using JavaScript to add additional inputs to the page. If you're doing it via AJAX (returning a partial view), you'll need to pass the index to your endpoint so that it can be utilized to generate the right input names. If you're using something like Knockout, Angular, etc., you should ensure that whatever template is being used to generate the inputs takes an index into account.

</br> tag not working in MVC view

Not sure if this is a MVC or Razor problem. But I can't put a line break in my view. This is the code on the index.cshtml
#using (Html.BeginForm("Create", "Vacant", FormMethod.Post, new { role = "form" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary("", new { #class = "text-danger" })
<!--TITLE-->
<div class="form-group">
#Html.LabelFor(m => m.Title, new { #class = "col-md-3 control-label" })
<div class="col-md-12">
#Html.TextBoxFor(m => m.Title, new { #class = "form-control" })
</div>
</div>
<!--DESCRIPTION-->
<div class="form-group">
#Html.LabelFor(m => m.Description, new { #class = "col-md-3 control-label" })
<div class="col-md-10">
#Html.TextAreaFor(m => m.Description, new { #class = "form-control" })
</div>
</div>
<br /> ----> HERE
<!--TABS-->
<div class="form-group">
<div class="col-md-10">
As you can see I put the line break tag before to displayed the third field (Project) in my View.
The View is displayed without any error. However, the line break is not rendered between the 2nd and 3rd fields. Causing those two fields one after another with any space on them.
This is the screenshot
How could I put a line break between those two fields? Is there any #Html helper or Razor code to do that?
Thanks!
Try this
<div style="clear:both;margin-bottom:20px">
<!--TABS-->
<div class="form-group">
You can insert one more Div Between them.
OR
You can decorate the TAB Div with some STYLE like-
<div class="form-group" style="margin-top:20px">
OR
You can insert one more <P /> Between them.

Custom entry on #Html.DropDownListFor

The code below will only accept the colors contained in the model. How can it allow for the user to enter one that is not listed in the model ?
<div class="form-group input-group-sm">
#Html.LabelFor(m => m.CarColor, new { #class = "control-label col-md-5" })
<div class="col-md-7">
#Html.DropDownListFor(m => m.CarColor, ViewBag.CarColorList as SelectList })
</div>
</div>
The way that I would do it would to be to use Select2. Select2 is basically an awesome drop down list. The 'Loading Data' example shows you where to start.

Resources