Not Receiving Multiple Partial View data on Postback - asp.net-mvc-4

Please can you help on the below query.
I have got a main view and partial view. In main view looping through based on the count of model, the partial views will be rendered. The Partial View is as per below
-----------------Partial View----------------------
#using (Html.BeginCollectionItem("books"))
{
<div id="bookRow" class="bookRow">
<div class='container'>
<div class="align-left">
<h1>Book Name</h1>
<h2>#Html.TextBoxFor(m => m.BookName)</h2>
</div>
<div class="align-right">
<h1>Author</h1>
<h2>#Html.TextBoxFor(m => m.Author)</h2>
</div>
<div class="align-right">
<h1>Publisher</h1>
<h2>#Html.TextBoxFor(m => m.Publisher)</h2>
</div>
<div class="align-right">
#Html.CheckBoxFor(model => model.isConfirm)
#Html.Hidden("Id", #Model.Id)
</div>
Delete
</div>
</div>
}
-------------------Main View----------------------
#model IEnumerable<TDLProject.Models.BookViewModel>
<fieldset>
<legend>Books</legend>
<div id="new-Book">
#foreach (var model in Model)
{
#Html.Partial("_DynamicPartialView", model)
}
</div>
<div>
<input type="button" id="addBook" name="addBook" value="Add Book" />
<br />
</div>
<br />
</fieldset>
#using (Html.BeginForm())
{
<div>
<input type="submit" id="submitButton" value="Submit" />
</div>
}
-------------Controller--------------
[HttpPost]
public ActionResult Contact(IEnumerable<BookViewModel> bookModel)
{
// To do: do whatever you want with the data
return View();
}
The Problem is I am not receiving the data posted from View to the Controller on Click of Submit button. I have multiple partial views of same model on the main view and when click of submit button I need all the partial view data to posted to controller. In Partial View I am using BeginCollectionItem. Please can you help on this.

A form only posts back the name/value pairs of its successful controls, and your not generating the form controls inside the <form> tags.
Change the code to move the #Html.Partial() code inside the <form> (simplified)
#model IEnumerable<TDLProject.Models.BookViewModel>
#using (Html.BeginForm())
{
#foreach (var model in Model)
{
#Html.Partial("_DynamicPartialView", model)
}
<input type="button" id="addBook" name="addBook" value="Add Book" />
<input type="submit" id="submitButton" value="Submit" />
}
You also need to change the POST method signature to
public ActionResult Contact(IEnumerable<BookViewModel> books)
to match the name you use in the #using (Html.BeginCollectionItem("books")) method.

Related

Razor-pages form is not hitting the post method

My post form is not working - the method in C# class is not even executing.
I tried some soutions I found, but still can't handle with that.
My simple view ReportBug.cshtml:
#page
#model Report
<div class="m-3 p-3">
<div class="text-center">
<h4 class="display-4">Report a bug</h4>
</div>
<form method="post">
<div class="row">
#(Html.Kendo()
.TextBoxFor(t => t.Title)
.Placeholder("Title")
.HtmlAttributes(new { style = "width: 25%" })
)
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
My C# class is:
public class ReportBugModel : PageModel
{
public void OnGet()
{
}
public void OnPost()
{
}
public void OnPost(Report report)
{
}
}
as you can see I tried call this method with no parameter and with 1 parameter (Report model).
So summarizing:
I have #addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers in viewImports
I tried tag helpers asp-antiforgery="true"
Before these post method were named OnPostReport(Report report) and I used tag helper asp-page-handler="Report", but also failed.
So far after click Submit button my page is only reloading and I don't have any erros in console.
#Edit
Here is the generated HTML code:
<div class="m-3 p-3">
<div class="text-center">
<h4 class="display-4">Report a bug</h4>
</div>
<form method="post">
<div class="row">
<span class="k-widget k-textbox" style="width: 25%;"><input id="Title" name="Title" style="width: 100%;" value="" data-role="textbox" aria-disabled="false" class="k-input" placeholder="Title" autocomplete="off"></span><script>kendo.syncReady(function(){jQuery("#Title").kendoTextBox({"placeholder":"Title"});});</script>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8Bbl_ufFcklEjkehOGdz8BtSJK0b5YyLKm-ID2YYYWig_98ZBjFzd9-V_cDDrtBJqiKXJmW7blydpKIKa9qdz9sZZldP3cmya-BVho3uUIbW3_Ob-BVrLmAUi_KHq3eKEAE7nrELLwzebuzXTmnsP6sK2MubiEb3lK3mqOzmVERB2NmXvpI43QmwL-lGUr43Rw">
</form>
</div>
You may misunderstand Razor Pages,please firstly learn the get started document:
For how to fix your issue,you could follow the steps below:
1.Change your Razor Pages ReportBug.cshtml(You must change #model Report to #model ReportBugModel):
#page
#model ReportBugModel //change here...
<div class="m-3 p-3">
<div class="text-center">
<h4 class="display-4">Report a bug</h4>
</div>
<form method="post">
<div class="row">
#(Html.Kendo()
.TextBoxFor(t => t.Report.Title) //also change here...
.Placeholder("Title")
.HtmlAttributes(new { style = "width: 25%" })
)
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
2.Change your Razor Page backend code ReportBug.cshtml.cs:
public class ReportBugModel : PageModel
{
public void OnGet()
{
}
public Report Report { get; set; } //add this...
public void OnPost(Report report)
{
}
}
Result:

Checkbox list values empty when ModelState is not valid and ASP.NET Core does return Page()

I created an ASP.NET Core 3.1 project. I have a form in it with several checkbox lists. I can get the values into the properties in POST and they are correctly filled in (e.g. List SelectedItems). However for some custom fields I have to do a validation in OnPost() method and if the conditions are not met or a ModelState is not valid, it return Page(). Normally I would expect that every property that was filled in in the form is still filled in, but the checkboxes are always empty and not a single one is checked. The other data (radio buttons, textboxes, etc.) are still filled in.
I even tried to put the values within the Razor page, but even then neither of the checkboxes was checked.
Here is an example of one of the checkboxes:
In Razor page:
#for (var i = 1; i <= 10; i++){
<input name="AreChecked" type="checkbox" id="#i" value="#i" /> #i<br />
<input type="hidden" value="true" id="#i" name="AreChecked" />}
Behind code:
[BindProperties]
public class TestFormModel : PageModel
{
[BindProperty]
public List<int> AreChecked { get; set; }}
public IActionResult OnPost()
{
//some other form check statements here
//...
if (ModelState.IsValid)
{
//process data code...
}
return Page();
}
Can someone help me with this?
You could use JQuery to achieve as shown :
#page
#model RazorPages3_1.AddimgModelModel
<div class="row">
<div class="col-md-4">
<form enctype="multipart/form-data" method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Petimg.PetName" class="control-label"></label>
<input asp-for="Petimg.PetName" class="form-control" />
<span asp-validation-for="Petimg.PetName" class="text-danger"></span>
</div>
<div class="form-group">
<input asp-for="Uploads" class="form-control" />
</div>
#for (var i = 1; i <= 10; i++)
{
<input name="AreChecked" type="checkbox" id="#i" value="#i" /> #i<br />
<input type="hidden" value="true" id="#i" name=""AreChecked" />
}
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-page="Index">Back to List</a>
</div>
#section Scripts {
<script>
var checkedlist = #Html.Raw(Json.Serialize(Model.AreChecked));;
if (checkedlist.length > 0) {
$.each(checkedlist, function (index, value) {
$('input[type=checkbox]').each(function () {
var id = $(this).attr("id");
if (id == value) {
$(this).attr('checked', 'checked');
}
})
});
}
</script>
}
Result

Why is the Bind attribute seemingly breaking my model binding of nested objects?

Could someone help me resolve this issue. I'm trying to limit over posting with bind param action but it seems that it doesn't work at all. When I removed the Bind keyword, everything started to work as a charm.
Here is the code sample:
View Model:
public class ProductCreateViewModel
{
public Product Product { get; set; }
public ICollection<IFormFile> Images { get; set; }
}
Action:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("Product.Id,Product.CategoryId,Product.Description,Product.Title")] ProductCreateViewModel productVM)
{
if (ModelState.IsValid)
{
_context.Add(productVM.Product);
await _context.SaveChangesAsync();
return RedirectToAction("Index");
}
ViewData["CategoryId"] = new SelectList(_context.Categories.Include(c => c.Categories).Where(c => c.ParentCategoryId == null), "Id", "Name", productVM.Product.CategoryId);
return View(productVM);
}
View:
#model CatalogWebApp.Models.ProductsViewModels.ProductCreateViewModel
#{
ViewData["Title"] = "Add Product";
ViewData["BigPageTitle"] = "Products";
ViewData["PageBoxTitle"] = "Add New Product";
}
<form asp-action="Create">
<div class="form-horizontal">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Product.CategoryId" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select name="Product.CategoryId" class ="form-control">
#foreach(Category item in (ViewBag.CategoryId as SelectList).Items)
{
<option value="#item.Id">#item.Name</option>
if (item.Categories != null && item.Categories.Count > 0)
{
foreach (var subCat in item.Categories)
{
<option value="#subCat.Id">--#subCat.Name</option>
}
}
}
</select>
</div>
</div>
<div class="form-group">
<label asp-for="Product.Description" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Product.Description" class="form-control" />
<span asp-validation-for="Product.Description" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="Product.Title" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Product.Title" class="form-control" />
<span asp-validation-for="Product.Title" 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>
</div>
</form>
<div>
<a asp-action="Index">Back to List</a>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Could someone pelase indicate if I have a problem or it is only a known asp.net core issue?
I'm not quite sure why you using Bind for your case.
Just create sepatate ViewModel with only properties you need like ProductCreateStort.
Then use this ViewModel in your controller signature and inherit your main model from it.
This way you won't mess with Bind and limit your params on POST
While I'm fairly new to ASP.NET Core myself (and coming to this question 7 months late), I ran into this same issue. I think the key here is that you have to bind "Product" for it to be considered. Binding "Product.Id" by itself doesn't appear to be good enough. So this should work:
[Bind("Product,Product.Id,Product.CategoryId,Product.Description,Product.Title")]
Of course, Hamid Mosalla's comment is a better option if ALL of your bound properties are on the nested object (which leads to wonder why you need a view model in the first place). In my case, I have a nested object AND a local property, so using the "Prefix" solution wasn't the right thing to do.
Anyway, hope this helps someone.
You need to pass your values as params string[], not as a single string separated by commas:
[Bind("Product.Id","Product.CategoryId","Product.Description","Product.Title")]
See Source

what is the use of insert mode on AJAXFORM in MVC?

When i am clicking the ajax from is loaded the partila view correctly inside the div have id as mytraget. But my question is what is the use of insertmode in ajax form.
On submitting the ajax form it always load the partial view inside of the div have id as mytraget on all type of insert mode. Then what is the of insert mode?
My original view named as MyView
#model Example.Models.mytest
<div id="mytraget"> </div>
#using(Ajax.BeginForm("myParialAjax", new AjaxOptions() { InsertionMode = InsertionMode.InsertBefore, UpdateTargetId = "mytraget" }))
{
<p>Name</p> #Html.TextBoxFor(m => m.string1)
<input type="submit" value="Submit" />
}
My Cobtroller Method
[HttpPost]
public PartialViewResult myParialAjax(mytest s)
{
return PartialView("Mypartial", s);
}
My Parial view which is named as Mypartial
#model Example.Models.mytest
<p>
#Html.TextBoxFor(m =>m.string1)
</p>
In all type of insert mode i get partial view inside of the the below div.
Output :
<div id="mytraget">
<p>
<input id="string1" type="text" value="asdf" name="string1">
</p>
</div>
I got myself the answer What i am missing is Need to insert some tags inside of the target tag.
Like below:
#model Example.Models.mytest
<div id="mytarget">
<p> my para </p>
</div>
#using(Ajax.BeginForm("myParialAjax", new AjaxOptions() { InsertionMode = InsertionMode.InsertBefore, UpdateTargetId = "mytarget" }))
{
<p>Name</p> #Html.TextBoxFor(m => m.string1)
<input type="submit" value="Submit" />
}
Now here InsertionMode.InsertBefore will insert my partial view above the paragraph tag and InsertionMode.InsertAfter will insert my partial view after the paragraph tag and InsertionMode.Replace will replace the whole things which is inside of the tag with my target id.

MVC 4 Form - submit button doesn't do anything

Trying to implement a form in MVC4 (+Razor), but submit button is not doing anything.
Controller (that should get the post action):
public class GeneralController
{
[HttpPost]
public ActionResult SearchResults(SearchParamsModel searchParams)
{
// doin some stuff here
return View("SearchResultsView");
}
}
View (.cshtml)
#model Models.SearchParamsModel
#using (Html.BeginForm("SearchResults", "General", FormMethod.Post))
{
<section class="form-field">
<input type="text" name="Property1" id="Property1" class="field field139 autocomplete-init-no-img" />
<label for="Property1">value1</label>
<form action="" method="post" class="clearfix">
<input type="submit" value="some value" class="submit btn blue-btn special-submit" />
</form>
</section>
}
Model
public class SearchParamsModel
{
public string Property1{ get; set; }
}
If you just need to implement searching you don't need to use ViewModel, you may send string with search request. And it shouldn't be Post method:
public ActionResult SearchResults(string searchString)
{
//code for searching
return View(yourmodel);
}
In View
#using (Html.BeginForm())
{
Searching: #Html.TextBox("SearchString")
<input type="submit" value="Search"/>
}
The Html.BeginForm helper will create the form tags for you, try it...
View:
#model Models.SearchParamsModel
#using (Html.BeginForm("SearchResults", "General", FormMethod.Post))
{
<section class="form-field">
<input type="text" name="Property1" id="Property1" class="field
field139 autocomplete-init-no-img" />
<label for="Property1">value1</label>
<input type="submit" value="some value"
class="submit btn blue-btn special-submit" />
</section>
}
if I do the same in MVC 4 or 5 I get the same result.
look at adding <fieldset> tags around all controls:
#using (Html.BeginForm("SearchResults", "General", FormMethod.Post))
{
<fieldset>
// your controls...
<input type="text" name="Property1" id="Property1" class="field field139 autocomplete-init-no-img" />
<label for="Property1">value1</label>
<input type="submit" value="some value" class="submit btn blue-btn special-submit" />
// if you need a partial form included:
#{Html.RenderPartial("_SomeOtherPartial", #Model);}
// etc..
</fieldset>
}
Give that a try...
Let me know