save submit button without refreshing the page
I have a bookmark "Service", when i click it method Service() run
Controller Home
[HttpGet]
public IActionResult Service()
{(...)
return View("~/Views/Service/Service.cshtml", viewModel);
}
then I choose from grid a record with data, when row changed code below run
View Service.cshtml
$.ajax({ url: "@Url.Action("PartialServiceTable", "Home")",
(...)
$("#serviceTable").html(data);});
It run method in controller, who give mi partial view
Controller Home
[HttpPost]
public async Task<ActionResult>
PartialServiceTable(string serviceData)
{ (...)
return PartialView("~/Views/Service/_serviceTable.cshtml", viewModel);
}
and in partial view i have button submit, who save data to database
View _serviceTable.cshtml
@using (Html.BeginForm("saveService", "Home", FormMethod.Post, new { id = "tableForm" }))
{(...)
<button ValidationGroup=“save” id="button_submit_id_save" name="button_submit_name_save" class="btn btn-success" type="submit" value="Save" data-modal-trigger="trigger-1" style="margin-top: 0px;"><i class="fa fa-fire" aria-hidden="true"></i>Save status</button>
(...)}
here i have save and i want to back to view > partialview, now i have back to view
to be just a save without refreshing the page
do I need to build a method / view that will return view and partialview together. How can I do that?
Controller Home
[HttpPost]
public async Task<ActionResult>
saveService([FromForm]ParentView modelKarta, IFormCollection formEcpAllData, string button_submit_name_save) { (...)
return RedirectToAction("Service"); }
is there any other way?
Solution 1:
My suggestion is that:
You can use Ajax to save and then update locally, so you can save the form without submitting. You could refer the following demo: user partial view to display the Color list and save the updated Color.
After updating the color success via Ajax, in the Ajax success function, we could use JQuery to update the color to the color list, or use Ajax method to call the action method then update the color table content. Model:
public class Color
{
public int ColorID { get; set; }
public string ColorCode { get; set; }
public string ColorName { get; set; }
}
_serviceTable.cshtml: use to update color
@model SubmitWithoutRefresh.Models.Color
@{
ViewData["Title"] = "saveService";
Layout = "";
}
<div class="card">
<div class="card-body">
<form asp-action="saveService">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="ColorID" id="txtColorID"/>
<div class="form-row">
<div class="col-md-6 mb-3">
<div class="form-group">
<label asp-for="ColorCode" class="control-label"></label>
<input asp-for="ColorCode" class="form-control" id="txtColorCode" />
<span asp-validation-for="ColorCode" class="text-danger"></span>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-group">
<label asp-for="ColorName" class="control-label"></label>
<input asp-for="ColorName" class="form-control" id="txtColorName" />
<span asp-validation-for="ColorName" class="text-danger"></span>
</div>
</div>
</div>
<div class="form-group">
<div class="ml-3 mt-3">
<button type="button" id="btnaddcolor" onclick='saveService(ColorID)'>saveService</button>
</div>
</div>
</form>
</div>
</div
_PVShowAllColor.cshtml: use to display the color list.
@model IEnumerable<SubmitWithoutRefresh.Models.Color>
<table id="example" class="table table-hover">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.ColorID)
</th>
<th>
@Html.DisplayNameFor(model => model.ColorCode)
</th>
<th>
@Html.DisplayNameFor(model => model.ColorName)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td @item.ColorID="ColorID" >
@Html.DisplayFor(modelItem => item.ColorID)
</td>
<td>
@Html.DisplayFor(modelItem => item.ColorCode)
</td>
<td>
@Html.DisplayFor(modelItem => item.ColorName)
</td>
<td>
<button type="button" onclick='PartialServiceTable(@item.ColorID)'>
serviceTable
</button>
</td>
</tr>
}
</tbody>
</table>
Service.cshtml:
@model IEnumerable<SubmitWithoutRefresh.Models.Color>
@{
ViewData["Title"] = "Service";
}
<div class="card">
<div class="card-body">
<div id="colorlist">
<partial name="_PVShowAllColor" model="@Model" />
</div>
</div>
</div>
<div id="InsertForm"></div>
<script>
function PartialServiceTable(colorid) {
event.preventDefault();
var _url = '@Url.Action("PartialServiceTable", "Color")';
var id = colorid;
var newurl = _url+"/"+id;
$.ajax({
url: newurl,
type: "Get",
data: { }
}).done(function (result) {
$('#InsertForm').html(result);
saveService();
});
}
function saveService(colorid) {
//find the saveService button in the InsertForm, and then save the new color.
$("#btnaddcolor").click(function () {
event.preventDefault();
var _url = '@Url.Action("saveService", "Color")';
var id = colorid;
var newurl = _url+"/"+id;
$.ajax({
url: _url,
type: "POST",
data: {
ColorID: $("#txtColorID").val(),
ColorCode: $("#txtColorCode").val(),
ColorName: $("#txtColorName").val(),
},
success: function (response) {
//update the Insert Form.
$('#InsertForm').html(response);
//attach the click event for the saveService button.
saveService();
//after save the new color success, call the ShowAllColor action method to update the partial view (display the latest data)
$.ajax({
url: '@Url.Action("ShowAllColor", "Color")',
type: "Get",
success: function (responsedata) {
$('#colorlist').html(responsedata);
}
});
},
});
});
}
</script>
ColorController:
public class ColorController : Controller
{
private readonly ColorContext _context;
public ColorController(ColorContext context)
{
_context = context;
}
public async Task<IActionResult> Service()
{
return View(_context.Color.ToList());
}
public async Task<IActionResult> ShowAllColor()
{
return PartialView("_PVShowAllColor", _context.Color.ToList());
}
public async Task<IActionResult> PartialServiceTable(int? id)
{
var color = await _context.Color.FindAsync(id);
return PartialView("_serviceTable", color);
}
[HttpPost]
public async Task<IActionResult> saveService(int id, [Bind("ColorID,ColorCode,ColorName")] Color color)
{
_context.Update(color);
await _context.SaveChangesAsync();
return PartialView("_serviceTable", color);
}
private bool ColorExists(int colorID)
{
return _context.Color.Any(e => e.ColorID == colorID);
}
}
The result like this:
