8/9/2017 Hungry developer - .NET, C#, ASP.NET MVC: Submitting form with partial view in ASP.

NET MVC

More Next Blog 82.raghu@gmail

Hungry developer - .NET, C#, ASP.NET MVC

Blog about Asp.Met MVC, Unity 3d, Visual studio, Unreal Development Kit, Blender, Android. C#, Razor, 3d models.

Saturday, 15 March 2014

My assets in U
Submitting form with partial view in ASP.NET MVC
In this tutorial we want to submit form with partial model.

Download full project here :

We are going to have ClientVM that will have partial view with Address model.
Create new MVC 4 project, choose internet project and Razor.
Games Materi

Create models that we will use in this project.

Models

public class Client

{ Youtube
public Client()
{
}
Quotes & Thoughts
public Client(string firstName, string lastName, Guid addressId)
{ "failure to prepare, is
this.address = new Address();
this.clientId = Guid.NewGuid();
this.firstName = firstName; Tags
this.lastName = lastName;
this.addressId = addressId; C# (35)
}
Unity 3D
public Guid clientId { get; set; } (29) madewithu
public string firstName { get; set; } (12) UDK - Unrea
public string lastName { get; set; }
(10) interactive 3d
public Guid addressId { get; set; }
(5) music
public virtual Address address { get; set; } indiedev (4)
} (2) game textures
reflection (2)
api (2) web developm
public class Address
angular js (1) asset store
{ (1) async (1) asynchronou
public Address() creepy sounds
{ (1) fallout4 (1) free asset t
syntax highlighter
} mars (1) mars lander
shader (1) royalty free fx
sql (1) unity crashes
public Address(string houseNumber, string streetName)
optimization (1)
{
unobtrusive js (1)
this.addressId = Guid.NewGuid();
this.houseNumber = houseNumber;
this.streetName = streetName;
} Buy me a coffee or

public Guid addressId { get; set; }

public string houseNumber { get; set; }
public string streetName { get; set; }
}

Search This Blog

View Models

public class ClientVM

{
public ClientVM() About Me
{

public ClientVM(Client client, Address address)

{
this.clientId = Guid.NewGuid(); Adam
Bielecki
this.firstName = client.firstName;
Follow
this.lastName = client.lastName;
this.addressId = client.addressId; .NET
this.addressPartial = address; professional with
} a good music

http://www.adambielecki.com/2014/03/submitting-form-with-partial-view-in.html 1/5
8/9/2017 Hungry developer - .NET, C#, ASP.NET MVC: Submitting form with partial view in ASP.NET MVC
taste and
public Guid clientId { get; set; } passionate game
public string firstName { get; set; } developer.
public string lastName { get; set; } View my
public Guid addressId { get; set; } complete profile
public Address addressPartial { get; set; }

In Home controller we will create ActionResult ClientInfo Blog Archive

2016 (8)
public ActionResult ClientInfo()
{ 2015 (23)
// Normally we would get Client from database. For test we use constructors to define new entries. 2014 (20)

Address address = new Address("25 A", "London street");

November
Client client = new Client("Adam", "Bielecki", address.addressId); October
September
ClientVM viewModel = new ClientVM(client, address);
July (5)
return View(viewModel);
April (2)
}
March
Submitting form
and the same method to submit the form:
view in ASP.N
How to hide que
[HttpPost] parameter na
public ActionResult ClientInfo(ClientVM viewModel) URL...
{
Project Solar Sy
return View(viewModel); 3d - update #
}
February

In _Layout_cs change 2nd link for menu. January

2013 (39)
<li>@Html.ActionLink("Submit Partial Model", "ClientInfo", "Home")</li>
2012 (9)

so menu tabs should look like that:

<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Submit Partial Model", "ClientInfo", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Now we have to create 1 view for ClientInfo and 1 partial view for Address.
Compile your project (Shift+Ctrl+B), right click ClientInfo in Home Controller and Add View.

Check Create a strongly-type view, choose ClientVM and sca old template : Edit.

Right click on shared folder add view and call it _Address. Use the same setting as before, but this time select Address as your model class and check
box "Create as a partial view".

Remove form from _Address partial view so it should like that:

http://www.adambielecki.com/2014/03/submitting-form-with-partial-view-in.html 2/5
8/9/2017 Hungry developer - .NET, C#, ASP.NET MVC: Submitting form with partial view in ASP.NET MVC

@model PartialViewModelSubmission.Models.Address

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<h2>Address</h2>

<fieldset>
<legend>Address</legend>

@Html.HiddenFor(model => model.addressId)

<div class="editor-label">
@Html.LabelFor(model => model.houseNumber)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.houseNumber)
@Html.ValidationMessageFor(model => model.houseNumber)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.streetName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.streetName)
@Html.ValidationMessageFor(model => model.streetName)
</div>

</fieldset>

Run the application, click Submit Partial Model and submit the form.
As you can see we get error as Address have not been submitted.

The reason why it is happening is due to binding issue. Let's x it.

We will have to create partial class for Address. In Address.cs add this partial class:

public partial class AddressBase

{
public virtual Address partialAddress { get; set; }
}

Using virtual type we are going to lazy load Address.

Modify ClientVM so it looks like that:

public class ClientVM : AddressBase

{
public ClientVM()
{

public ClientVM(Client client, Address address)

{
this.clientId = Guid.NewGuid();
this.firstName = client.firstName;
this.lastName = client.lastName;
//this.addressId = client.addressId;
//this.addressPartial = address;
this.partialAddress = address;

http://www.adambielecki.com/2014/03/submitting-form-with-partial-view-in.html 3/5
8/9/2017 Hungry developer - .NET, C#, ASP.NET MVC: Submitting form with partial view in ASP.NET MVC
public Guid clientId { get; set; }
public string firstName { get; set; }
public string lastName { get; set; }
// public Guid addressId { get; set; }
// public Address addressPartial { get; set; }

ClientVM inherit from AddressBase partial class so we can assign address to base.
this.partialAddress = address;

This is all you have to do for classes, we have to amend views a bit as well.

In ClientInfo we are going to pass ClientVM model to address so change it to :

@Html.Partial("_Address", Model)

In _Address view change model to AddressBase and update sca olding so it should look like that:

@model PartialViewModelSubmission.Models.AddressBase

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<h2>Address</h2>

<fieldset>
<legend>Address</legend>

@Html.HiddenFor(model => model.partialAddress.addressId)

<div class="editor-label">
@Html.LabelFor(model => model.partialAddress.houseNumber)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.partialAddress.houseNumber)
@Html.ValidationMessageFor(model => model.partialAddress.houseNumber)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.partialAddress.streetName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.partialAddress.streetName)
@Html.ValidationMessageFor(model => model.partialAddress.streetName)
</div>

</fieldset>

Now run the application again and if you followed everything correctly you should be able to see Address model when you debug.

Posted by Adam Bielecki at 12:08

Labels: asp.net mvc, C#, visual studio

http://www.adambielecki.com/2014/03/submitting-form-with-partial-view-in.html 4/5
8/9/2017 Hungry developer - .NET, C#, ASP.NET MVC: Submitting form with partial view in ASP.NET MVC

No comments yet

Add a comment as Raghu Gowda

Newer Post Home Older Post

Subscribe to: Post Comments (Atom)

enot-poloskun Blogger

http://www.adambielecki.com/2014/03/submitting-form-with-partial-view-in.html 5/5