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

how to insert only unique value in Editor templates in mvc

本文关键字：插入 唯一 mvc 编辑器      更新时间：2023-09-26

我想在我的编辑器模板中只输入唯一的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>
}

假设您希望在用户输入非唯一值时立即提醒用户，那么您需要处理文本框的.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，您可能会根据需要显示/隐藏

接下来你的部分包括@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)(您目前正在为每个部分添加一个)，并且您需要从部分中删除脚本-您应该只在主视图

中有一个脚本副本。

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

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