I have a table on which there's an Edit
button for every record at the last column.
My goal is to have an editable form on a modal for the record on which the user pressed the Edit
button.
In order to accomplish that, I've created a Partial View which i want to be loaded on the modal, but after tons of tries, i cannot get it working. The JS created to compose the partial view URL and loading into the modal seems to have no effect and it's raising the following error:
VM364 ESa31501901:361 Uncaught ReferenceError: ESa31501901 is not defined at HTMLAnchorElement.onclick
Note: ESa31501901 is the first parameter passed into the JS function.
This is my intention:
a) Edit()
: This method will return all records.
b) EditClientFeature(string ClientID, string WorkProcessID)
: This method will return a partial view containing the record of a particular client. This method is called when we start editing a client record. The client record is displayed in modal (popup).
c) EditClientFeature(ClientFeatureViewModel model)
: This method will update the client record.
ClientFeature ViewModel
public class ClientFeatureViewModel
{
public string ClientID { get; set; }
public string WorkProcessID { get; set; }
public int? Certification { get; set; }
public bool? TrackingActive { get; set; }
public string ClientCode { get; set; }
public string ContractNo { get; set; }
public string ProductCode { get; set; }
}
Edit.cshtml
[...]
<tbody>
@foreach (var feature in Model.ClientFeatures)
{
<tr>
<td style="text-align:center"><strong>@feature.WorkProcessId</strong>/td>
<td style="text-align:center">@feature.Certificate</td>
<td style="text-align:center">@feature.TrackingActive</td>
<td style="text-align:center">@feature.ClientCode</td>
<td style="text-align:center">@feature.ContractNo</td>
<td style="text-align:center">@feature.ProductCode</td>
<td>
<a href="#" class="btn btn-success" onclick="EditCF(@Model.Piva, @feature.WorkProcessId)"><i class="glyphicon glyphicon-pencil"></i></a>
</td>
</tr>
}
</tbody>
[...]
<div class="modal fade" id="ModalClientFeatures">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<h3 class="modal-title">Edit</h3>
</div>
<div class="modal-body" id="ModalBodyDiv">
<!-- Here's where i want to show the partial view-->
</div>
</div>
</div>
</div>
[...]
<script>
function EditCF(ClientID, WorkProcessID) {
var url = "/Admin/EditClientFeature?ClientID=" + ClientID + "?WorkProcessID=" + WorkProcessID;
$("#ModalBodyDiv").load(url, function () {
$("#ModalClientFeatures").modal("show");
})
}
</script>
ClientFeaturepartialView.cshtml
@model Project.Models.ClientFeatureViewModel
<script src="~/Scripts/jquery-3.3.1.js"></script>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<form id="myForm">
<div class="form-horizontal">
<h4>ClientFeatureViewModel</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.ClientID)
<div class="form-group">
@Html.LabelFor(model => model.WorkProcessID, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.WorkProcessID, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.WorkProcessID, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Certification, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Certification, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Certification, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.TrackingActive, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
@Html.EditorFor(model => model.TrackingActive)
@Html.ValidationMessageFor(model => model.TrackingActive, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ClientCode, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.ClientCode, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.ClientCode, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ContractNo, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.ContractNo, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.ContractNo, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ProductCode, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.ProductCode, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.ProductCode, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
<a href="#" id="btnSubmit" class="btn btn-success btn-block">
<span>Update</span>
</a>
</div>
</div>
</div>
</form>
}
Controller
public ActionResult EditClientFeature(string ClientID, string WorkProcessID)
{
PMEntities db = new EntityConn().Db;
ClientFeatures ClientFeature = db.ClientFeatures.Where(cf => cf.ClientId == ClientID && cf.WorkProcessId == WorkProcessID).SingleOrDefault();
if (ClientFeature != null) {
ClientFeatureViewModel model = new ClientFeatureViewModel
{
ClientID = ClientFeature.ClientId,
WorkProcessID = ClientFeature.WorkProcessId,
Certification = ClientFeature.Certificate,
TrackingActive = ClientFeature.TrackingActive,
ClientCode = ClientFeature.ClientCode,
ContractNo = ClientFeature.ContractNo,
ProductCode = ClientFeature.ProductCode,
};
return PartialView("ClientFeaturePartialView", model);
}
else { return View("Error"); }
}
[HttpPost]
public ActionResult EditClientFeature(ClientFeatureViewModel model)
{
try
{
PMEntities db = new EntityConn().Db;
if (model.ClientID != null)
{
//update
ClientFeatures ClientFeature = db.ClientFeatures.Where(cf => cf.ClientId == model.ClientID && cf.WorkProcessId == model.WorkProcessID).SingleOrDefault();
ClientFeature.Certificate = model.Certification;
ClientFeature.ClientCode = model.ClientCode;
ClientFeature.ContractNo = model.ContractNo;
ClientFeature.ProductCode = model.ProductCode;
ClientFeature.TrackingActive = model.TrackingActive;
db.SaveChanges();
}
}
catch (Exception ex)
{
throw ex;
}
}
I think your onclick
function parameter value is treated as a variable, not a string.
Solution 1:
Try below to pass as string: (Not tested though!)
onclick="EditCF(\'' + @Model.Piva + '\', \'' + @feature.WorkProcessId+ '\')"
Solution 2:
It's best to Attach a click
handler after adding a class for your link. And use HTML5
data attributes for storing your value client side.
<a href="#" class="btn btn-success editClient" data-ClientID="@Model.Piva" data-WorkProcessId="@feature.WorkProcessId"><i class="glyphicon glyphicon-pencil"></i></a>
$('.editClient).on('click', function() {
var clientID = $(this).data('ClientID');
var workProcessId = $(this).data('WorkProcessId');
var url = "/Admin/EditClientFeature?ClientID=" + clientID
+ "?WorkProcessID=" + workProcessID;
$("#ModalBodyDiv").load(url, function () {
$("#ModalClientFeatures").modal("show");
})
});
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.