如何在mvc的编辑器模板中只插入唯一值

Question

我只想在我的编辑器模板中输入唯一的Machine_serial_no，用户可以通过浏览文件添加Machine_serial_no或者可以手动输入如下代码所示，我只是想确保用户不应允许两次输入相同的值。随时欢迎您提出建议 ..提前致谢..

//主视图

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.9.2.min.js"></script>

<div id="cast">                                               

                <tr>
                    <td> File:</td>
                    <td><input type="file" id="file" /> </td>
                    <td>   <input type="button" value="Upload" id="btnSubmit" /> </td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>

                <tr class="manualSerial">
                    <td class="required">Total No of serial no U want to enter:</td>
                    <td>@Html.TextBoxFor(x => x.count, new { @Value = 0 })</td>
                    <td colspan="4">
                        <input type="button" value="Add Serial" id="addserial" />
                        @*@Html.ActionLink("Add Serial", "AddMachineSerial", "Import", new { @id = "addserial" ,})
                            @Html.ValidationMessageFor(model => model.serials.Machine_serial_no)*@
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td id="ShowModel" colspan="6">
                        <table id="tbl1" style="width:100%;">
                            <thead>
                                <tr>
                                    <td>Brand</td>
                                    <td>Machine</td>
                                    <td>Model</td>
                                    <td>Serial No</td>
                                    <td>Mac Address</td>
                                    <td>Action</td>
                                </tr>
                            </thead>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td id="ShowModel" colspan="6">
                        <div style="height:253px; width:100% ;overflow: auto;">
                            <table style="width:100%;margin-left:0px;margin-right:0px">
                                @*<thead>
                                        <tr>
                                            <th style="width:45px;">Brand</th>
                                                <th style="width:90px;">Machine</th>
                                                <th style="width:80px;">Model</th>
                                                <th>Serial No</th>
                                                <th>Mac Address</th>
                                                <th>Action</th>
                                        </tr>
                                    </thead>*@

                                <tr>
                                    <td colspan="6" id="td_serial"></td>
                                </tr>

                            </table>
                        </div>
                    </td>
                </tr>

//jquery

$('#addserial').click(function () {

    var count = $('#count').val();
    var i;    
        if ($('#searchid').val() != '') {
            if ($('#count').val() != 0) {
                for (i = 0; i < count; i++) {
                    $.ajax({
                        type: 'GET',
                        data: { mid: $('#machineTypes_MTId').val(), modelName: $('#searchid').val(), modelId: $('#searchValue').val() },
                        url: '@Url.Action("AddMachineSerial","Import")',
                        success: function (response) {
                            $('#ShowModel').show();
                            $('#td_serial').prepend(response);
                            $('#count').val(0);
                        }
                    });
                }
            }
            else {
                alert("Enter no of serial you want to enter!")
            }
        }
        else {
            alert("select Model First!")
            $('#count').val(0);
        }      

});

//编辑模板/局部视图

    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

@using (Html.BeginCollectionItem("serialList"))
{
    @Html.ValidationSummary(true)
    <div id="DeleteTxt1">

        <table id="tbl1" style="width:100%;margin-left:0px;margin-right:0px">
            <tr class="importitem1">
                <td>@Model.brandName</td>
                <td>@Model.machineName</td>
                <td>@Model.MachineModel</td>
                @*<td class="required">Machine Serial No.:</td>*@
                <td>

                    @Html.TextBoxFor(x => x.Machine_serial_no, new { placeHolder = "Enter Machine Serial here.", @class = "serial1"})
                    @Html.ValidationMessageFor(x => x.Machine_serial_no)
                </td>


                <td><input type="button" value="Cancel" id="DeleteBtn1" style="color:red;" /></td>

            </tr>
        </table>
    </div>
}

Answer 1

我认为这是你想要验证的客户端

   $(function (){
            $('#partialViewtextbox_Id').change(function (){
              var partial = $('#partialViewtextbox_Id').val();
              var main = $('#maintextbox_Id').val();
                  if(partial == main)
        {
                alert("value already available");
        }

                });       

        });

Answer 2

假设您想在用户输入非唯一值时立即提醒用户，那么您需要处理文本框的 .change() 事件，并且由于文本框是动态添加的，因此您需要使用事件委托

$('#td_serial').on('change', '.serial1', function() {
  var isvalid = true;
  var inputs = $('.serial1').not($(this));
  var text = $(this).val();
  $.each(inputs, function(index, item) {
    if ($(this).val() && $(this).val() === text) {
      isvalid = false;
      return false;
    }
  });
  if (!isvalid) {
    alert('not unique!');
  }
});

请注意 alert('not unique!') 仅用于测试目的 - 不清楚您希望如何通知用户 - 例如包含一个 div 和一条错误消息，您可以 show/hide 根据需要

接下来你的部分包括 @Html.ValidationMessageFor(x => x.Machine_serial_no) 表明你有验证属性。为了对动态创建的元素进行客户端验证，您需要在添加新元素时重新解析验证器。将您的脚本修改为

for (i = 0; i < count; i++) {
  $.ajax({
    type: 'GET',
    data: { mid: $('#machineTypes_MTId').val(), modelName: $('#searchid').val(), modelId: $('#searchValue').val() },
    url: '@Url.Action("AddMachineSerial","Import")',
    success: function (response) {
      $('#ShowModel').show();
      $('#td_serial').prepend(response);
      $('#count').val(0);
      // Reparse the validator
      $('form').data('validator', null);
      $.validator.unobtrusive.parse(form);
    }
  });
}

旁注 - 考虑对此进行修改，以便仅在所有 ajax 调用完成后才重新解析

另请注意，您应该只有一个 @Html.ValidationSummary(true)（您目前正在为每个部分添加一个）并且您需要从部分中删除脚本 - 您应该只在主视图

如何在mvc的编辑器模板中只插入唯一值

how to insert only unique value in Editor templates in mvc

javascript

jquery

client-side-validation

mvc-editor-templates

asp.net-mvc-4