asp.net-mvc


posting data from partial view on main view then submitting to controller


I have a MVC model as follows
public class ListSampleModel
{
[Key]
[DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
public int SampleId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public IList<PointOfContact> lstPoc { get; set; }
}
public class PointOfContact
{
[Key]
[DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
public int PocID { get; set; }
public string EmailAddress { get; set; }
public string PhoneNumber { get; set; }
}
What I have done is, create "PointOfContact" as a partial view on a jquery dialog and on "save" button click it shows the data on the main view in labels (I will have multiple point of contacts), now on submit I want this data along with the property values of ListSampleData to be posted back to the controller.
The issue is, the data related to simple properties are returned back but the list is always null.
below is my View
#model MVCDataFlowSample.Models.ListSampleModel
#using (Html.BeginForm("Create", "ListSample", FormMethod.Post))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<legend>ListSampleModel</legend>
<div class="editor-label">
#Html.LabelFor(model => model.FirstName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.FirstName)
#Html.ValidationMessageFor(model => model.FirstName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.LastName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.LastName)
#Html.ValidationMessageFor(model => model.LastName)
</div>
<div id="dialog1" class="ui-dialog" style="background-color:gray;"></div>
<div id="data">
</div>
<p>
<input type="button" value="Add More..." id="btnAdd" />
</p>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
Javascript on Main View
<script type="text/javascript">
$(document).ready(function () {
$('#btnAdd').on('click', function () {
$('#dialog1').dialog({
autoOpen: true,
position: { my: "center", at: "center", of: window },
width: 1000,
resizable: false,
title: 'Add User Form',
modal: true,
open: function () {
$(this).load('#Url.Action("PocPartial", "ListSample")');
},
buttons: {
"Save User": function () {
addUserInfo();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
return false;
});
function addUserInfo(email, phone) {
var text = "<div id='EmailAddress'>Email Address:" + $("#EAddress").val() + "</div><div id='PhoneNumber'>Phone Number:" + $("#PhNo").val() + "</div>";
$("#data").append(text);
}
});
</script>
Partial View
#model MVCDataFlowSample.Models.PointOfContact
<div>
#Html.Label("EmailAddress:")
<div>
#Html.TextBoxFor(x => x.EmailAddress, new { id = "EAddress" })
</div>
#Html.Label("PhoneNumber:")
<div>
#Html.TextBoxFor(x => x.PhoneNumber, new { id = "PhNo" })
</div>
</div>
any help will be appreciated.
The contents of DIV elements are not submitted as form data. If you'd like that data to be submitted, add it to the DOM as hidden INPUT elements in addition to your DIVs. You'll also need to format their names correctly so that MVC knows how to bind them. See this article for how complex objects are bound in MVC.
I posted partial view data to the main page's post action You can modify the idea to any of your suits
Partial View
<select name="Country">
<option>Indian</option>
<option>Africa</option>
</select>
<select name="State">
<option>Kerala</option>
<option>TamilNadu</option>
</select>
<select name="City">
<option>Thrissur</option>
<option>Palakkad</option>
</select>
Index Page
#{
ViewBag.Title = "IndexTestPost";
}
<h2>IndexTestPost</h2>
#using(Html.BeginForm()){
#Html.Partial("~/Views/_PartialPagePostCountry.cshtml");
<input type="submit" />
}
Class To Catch Post Data
public class CountryCityState
{
public string Country { get; set; }
public string State { get; set; }
public string City { get; set; }
}
Controller
public class TestPostPartialController : Controller
{
// GET: TestPostPartial
public ActionResult IndexTestPost()
{
return View();
}
[HttpPost]
public ActionResult IndexTestPost(CountryCityState CtnCtySta)
{
return View();
}
}

Related Links

Deploying ASP MVC 5 App with IIS 7.5
validation for dropdown in MVC3
MVC getting a list of music and image into a table
How to allow users to only edit their details in a catalog
Defining Repository for MVC best practice
MVC ASP.NET search filter by int
How do I add placeholder text from the model into a MVC view?
Web site analytic application in the mvc application
mvc3 EditorFor/DisplayFor throws Collection was modified; enumeration operation may not execute
When I update ASP.NET MVC from 5.0 to 5.1, do I need to update the bindingRedirect to 5.1?
Set ClaimsAuthorizationManager in Code (MVC 5)
KendoUi MVC Grid passing parameter values
How exactly does CSS/Javascript minification and bundling work in MVC?
Roles Comparison in MVC
Route Id overrides Model.Id
View containing paging and Multiple Models

Categories

HOME
amazon-s3
asp.net-mvc
opencv
collections
copy
blogs
asana
oracle-adf
windows-server-2012-r2
restsharp
py.test
copy-paste
android-vision
executable
openmodelica
resolve
html5-video
lag
aar
angular-components
thrift
gas
cmusphinx
contains
nintex-workflow
pcap
google-distancematrix-api
aikau
azure-ad-graph-api
c-strings
profiling
background-subtraction
shape
naturallyspeaking
hawq
arduino-esp8266
ruamel.yaml
debugview
pymysql
panel-data
imageshack
google-crawlers
texture-mapping
rights-management
weebly
essbase
btle
php-5.5
projection
integer-programming
program-slicing
openwebanalytics
website-hosting
simple.odata.client
ietf-netconf
jahia
a-star
mysql-error-1050
jeditorpane
masspay
mink
directsound
telecommunication
file-management
jongo
facebook-comments
filenet-content-engine
linqtocsv
document-ready
aldryn
autopy
ironmq
cng
translate3d
boost-coroutine
sql-server-ce-3.5
wintersmith
conditional-statements
mysql5
bessel-functions
concurrentdictionary
ash
keyboard-navigation
grunt-contrib-copy
hebrew
scala-pickling
confirmation
libtorrent-rasterbar
deap
emitmapper
kmz
angularjs-module
godaddy-api
msxsl
obout
self-organizing-maps
stumbleupon
etrade-api
wiki-markup
jquery-1.3.2
keylogger

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App