creating a partial view with a form post that planning on using in several places - asp.net-mvc-4

Question

How can I create a partial view with a form post that I plan on using in several places?
The partial view will have a form that creates an entry in data storage and displays the persisted data underneath this form.
So after submitting the form I ll see my entry in a grid like structure under the form without switching the parent view.
If the model is not valid the error will be shown also. The trick here is, how do I stay in my current page without creating an action
In the controller of each view that shows the partial view?
I will be using this partial view in say 10 different parent views.
Below, i provide some of the codes that will help community to make sense the question exactly.
How should i configure my code to achieve my goal.
Thanks
This is the partial view sample
#model ViewModels.CommentViewModel
#using (Html.BeginForm("Index", "Comment", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary()
<div class="form-group">
<label class="control-label col-md-2">Please Type Your Name</label>
<div class="col-md-10">
#Html.TextBoxFor(model => model.Name, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<input id="addComment" type="submit" value="Add" />
</div>
}
#foreach (var item in Model.Comments)
{
<p>
#item.Name
</p>
}
Here is Controller
public PartialViewResult Index(int id)
{
var model = new CommentViewModel() { Comments= db.Comments.Where(x=> x.NewsId == id && x.isApproved== true )};
return PartialView("_Comments", model);
}
[HttpPost]
public PartialViewResult Comment(int id, CommentViewModel model)
{
if (ModelState.IsValid)
{
var comment = new Comment()
{
Name = model.Name,
Title = model.Title,
CommentContent = model.Content,
Email = model.Email,
CreationDate = DateTime.Now,
RefId = Guid.NewGuid(),
isApproved = false,
NewsId = id
};
db.Comments.Add(comment);
db.SaveChanges();
return PartialView();
}
return PartialView();
}

Answer 1

If you want to do things like submit a form and retrieve updated data without reloading the page, then you're talking about AJAX. The fact that this is a partial view is meaningless in that context. It doesn't matter how many different views this partial view will be rendered in, you just need one action in one controller that can respond to an AJAX request. Then, you'll just need to do something like the following with JavaScript that can be included via an external file in whatever views need this form:
$('#MyPartialViewForm').on('submit', function (e) {
// prevents form from submitting standard way, causing page refresh
e.preventDefault();
$.post('/url/that/handles/form', $(this).serialize(), function (results) {
// results will be a rendered partial with the data here,
// which you can use to replace the content of a div or
// something on your page.
$('#DivWhereSubmittedDataIsDisplayed').html(results);
});
});
Then, in your action that responds to the AJAX request:
[HttpPost]
public ActionResult ActionForAjaxForm(FormModel model)
{
// do something like save the posted model
return PartialView("_PartialViewThatRendersData", model);
}