Actually there is no statement like partial view or parent view when you look at the situation in browser side. Browser only sees a html document. Html.Partial especially PartialViews are only meaningful in server side and they are there to help you indeed. It gives you ability to reuse partial views on multiple page and one place to modify all. When Razor rendering this cshtml file ,starts to render from top to bottom and when it encounters @Html.Partial("something") it executes that method which returns Html encoded string and displays the returned string. After all, Razor returns one complete html page. So when you submit data from your html only important thing is which input type has which name attribute.
Solution 1: Without Ajax
Your get method is like this according to your main view.
// GET: Item
public ActionResult MainView()
{
var _itemDetail = new ItemDetails { ID = 1, Name = "Item1" }; //you get this item somewhere maybe db
var pvm = new ProductionViewModel();
pvm.CurrentItemDetails = _itemDetail; //add item to viewmodel
return View(pvm);
}
i am assuming that you have form tags,, just change your button type to submit
@using(Html.BeginForm()){
<div class="row">
<div class="col-md-12">
@Html.Partial("_CurrentData", Model.CurrentItemDetails)
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-5">
<div>
<input type="submit" class="btn btn-primary" value="Submit" id="btnSubmit" />
<input type="button" class="btn btn-primary" value="Cancel" id="btnCancel" />
<br /><br />
</div>
</div>
</div>
}
And add your post action to controller, this is perfectly fine.
[HttpPost]
public ActionResult MainView(ItemDetails submittedItem)
{
//do stuff with model like persistence
var pvm = new ProductionViewModel();
pvm.CurrentItemDetails = submittedItem;
return View(pvm);
}
This will return same view with new item
Solution 2: Ajax Using Jquery
This solution is already given. You will have two option ; return partial view from server and replace older content with the one returned from server or return json and change the content by dom manipulation. Two approach have downsides.
Sippy's answer is perfect what i want to add is instead of jquery ajax method load method is more reasonable for returning static view.
$("#partialViewDiv").load('@Url.Content("~/Controller/_CurrentData")');
Solution 3:Using two way data binding or framework like Angular
When you wanna refresh your partial view you may need some extra information that is server generated like id of newly created item. This is why you need to talk to server cause you already have the new input values for partial view on the fly. May be you want to display all saved item in a list in somewhere in the same page and after created item returned from server you have to add it manually. So if your page needs situation like that best way is using frameworks like angular. This way you can refresh your partial view and make a lot things with no effort. My Demo just for demonstration you can follow many design principles.
This is main view
<div ng-app="ItemApp" ng-controller="ItemController">
<form name="newTopicForm" data-ng-submit="save()">
<div class="row">
<div class="col-md-12">
@Html.Partial("_CurrentData", Model.CurrentItemDetails)
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-5">
<div>
<input type="submit" class="btn btn-primary" value="Submit" id="btnSubmit" />
<input type="button" class="btn btn-primary" value="Cancel" id="btnCancel" />
<br /><br />
</div>
</div>
</div>
</form>
</div>
Partial view
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Editor</h3>
</div>
<div class="panel-body">
<div class="row form-group">
<div class="col-sm-4 control-label text-right">
<strong>Name:</strong>
</div>
<div class="col-sm-8 control-label">
@Html.TextBoxFor(m => m.Name, new { @class = "formcontrol",data_ng_model="item.name",data_ng_init="item.name="+"'"+@Model.Name+"'"})
</div>
</div>
</div>
</div>
Textbox is binded to item.name with ng-model attribute so we no need to worry about refreshing view. When item.name changes view changes too.(two way data binding)
Include angular js and this is custom js
var myApp = angular.module('ItemApp', []);
myApp.controller('ItemController', function ($scope, $http,$q) {
$scope.itemList = {};
$scope.save = function () {
$http.post("mainview", $scope.item).
then(function (result) {
$scope.item.name = result.data.Name; //update from server
//it is enoguh to refresh
//your partial view data
itemList.splice(0, 0, result.data);//add list may be you need to
//display in the view
},
function () {
console.log(error);
});
};
});
And server side code
[HttpPost]
public ActionResult MainView(ItemDetails SubmittedItem)
{
//do stuff with model like persistence
SubmittedItem.ID = 1;
return Json(SubmittedItem);
}
You just need to deal with object all view operations are done by two way data bindig when using angular.
