If you want to achieve this task, here's how you can do it.
Let's say you have a model structured like this :
public class Book
{
[Key]
public int ID { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public decimal Price { get; set; }
}
Suppose you have a parent page named index and two partial views named LoadPartialView1 and LoadPartialView2 loading on that page.
You can use the code snippet
@Html.Action("LoadPartialView1", "Home")
to load the partial view.
In this case, the
LoadPartialView1 method in the
Home controller will be called.
public class HomeController : Controller
{
public PartialViewResult LoadPartialView1()
{
Book book = new Book()
{
ID = 1,
Title = "Book1",
Description = "Test",
Price = Convert.ToDecimal(250.00)
};
return PartialView("_PartialView1", book);
}
}
This example shows how the book model is passed to the partial view.
Now let's look at the contents of _PartialView1.
@model WebApplication1.Models.Book
<h4>This is the _PartialView1 Header</h4>
<p id="bookId">Book Id = @Model.ID</p>
<p>Book Title = @Model.Title</p>
<p>Book Descrittion = @Model.Description</p>
<p>Book Price = @Model.Price</p>
Next scenario - Suppose you need to submit a form. You can call the controller using an Ajax Call.
Loading _PartialView2 from controller as follows:
public PartialViewResult LoadPartialView2()
{
Book book = new Book();
return PartialView("_PartialView2", book);
}
Here's the content of my _PartialView2 :
@model WebApplication1.Models.Book
<h4>This is the _PartialView2 Header</h4>
<label>Book Id</label><input id="bookId" type="text" />
<label>Book Title</label><input id="bookName" type="text" />
<label>Book Descrittion</label><input id="bookDesc" type="text" />
<label>Book Price </label><input id="bookPrice" type="text" />
<input id="btnSave" type="button" value="Save"/>
<script type="text/javascript">
$("#btnSave").click(function () {
var id = $('#bookId').val();
var name = $('#bookName').val();
var desc = $('#bookDesc').val();
var price = $('#bookPrice').val();
var mybook = {
ID: id,
Title: name,
Description: desc,
Price: price
};
$.ajax({
url: "/Home/DataFromPartialView",
type: "POST",
data: JSON.stringify(mybook),
dataType: 'json',
contentType: "application/json; charset=utf-8",
error: function (xhr) {
alert('Error');
},
success: function (result) {
alert('Success');
},
});
});
</script>
In this example, we extract data from the input fields, create a book object, and pass it to the DataFromPartialView method in the Home controller.
Below is the method implementation :
public PartialViewResult DataFromPartialView(Book mybook)
{
return View();
}
By following these steps, you can successfully pass model data to the controller.
Lastly, here is the code for the Index Page which includes the partial views.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>
<p>This is my Home Page.</p>
</div>
<div id="partialView1">
@Html.Action("LoadPartialView1", "Home")
</div>
<div id="partialView2">
@Html.Action("LoadPartialView2", "Home")
</div>
</body>
</html>