You can do that as follows.
Assume you have a model as follows :
public class Book
{
[Key]
public int ID { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public decimal Price { get; set; }
}
And you have a parent page called index and two partial views called LoadPartialView1 , LoadPartialView2 are loading on that page.
You can user @Html.Action("LoadPartialView1", "Home") to load partial view.
Here LoadPartialView1 method on Home controller will be executed.
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);
}
}
Here you can see that I am passing the book model to the partial view.
And here is my _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>
And the other scenario. Assume you want to submit an form. You can simply call controller using an Ajax Call.
Loading _PartialView2 from controller as follows :
public PartialViewResult LoadPartialView2()
{
Book book = new Book();
return PartialView("_PartialView2", book);
}
This is my _PartialView2 view :
@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>
Here I am getting the data from input fields, create an book object and pass it to the DataFromPartialView method in Home controller.
Here is the method code :
public PartialViewResult DataFromPartialView(Book mybook)
{
return View();
}
This way you can pass model data to controller.
And finally the code of Indec Page which contains 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>
