Редактировать запись, используя частичное представление, JQuery и Bootstrap Modal - PullRequest
Новая
       33

Редактировать запись, используя частичное представление, JQuery и Bootstrap Modal

1 голос
/ 22 апреля 2019

У меня есть таблица, в которой есть кнопка Edit для каждой записи в последнем столбце.

Моя цель - создать редактируемую форму для модальной записи, для которой пользователь нажал *Кнопка 1004 *.

Для этого я создал частичное представление, которое я хочу загрузить на модал, но после множества попыток я не могу заставить его работать.JS, созданный для создания URL-адреса частичного представления и загрузки в модальный режим, похоже, не имеет никакого эффекта, и он вызывает следующую ошибку:

VM364 ESa31501901: 361 Uncaught ReferenceError: ESa31501901 не определено в HTMLAnchorElement.onclick

Примечание: ESa31501901 - это первый параметр, переданный в функцию JS.

Это мое намерение:

a) Edit(): Этот метод возвращает все записи.

b) EditClientFeature(string ClientID, string WorkProcessID): этот метод возвращает частичное представление, содержащее запись определенного клиента.Этот метод вызывается, когда мы начинаем редактировать запись клиента.Запись клиента отображается в модальном режиме (всплывающее окно).

c) EditClientFeature(ClientFeatureViewModel model): этот метод обновит запись клиента.

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">&times;</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>
}

Контроллер 

    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;
        }

    }

1 Ответ

1 голос
/ 22 апреля 2019

Я думаю, что ваше onclick значение параметра функции рассматривается как переменная, а не строка.

Решение 1:

Попробуйте ниже передать как строку: (не проверено!) 

onclick="EditCF(\'' + @Model.Piva + '\', \'' + @feature.WorkProcessId+ '\')"

Решение 2:

Лучше всего присоединить обработчик click после добавления класса для вашей ссылки. И используйте HTML5 атрибуты данных для хранения вашего значения на стороне клиента. 

<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");

    })

});

Ссылка

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...