how to insert only unique value in Editor templates in mvc

Question

i want to enter only unique Machine_serial_no in my editor templates , user can add Machine_serial_no through browsing a file or can enter manually As shown in below code, i just want to make sure that user shouldnot allow to enter same value twice .your suggestion is always welcome ..Thanks in advance..

//main view

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

});

//editor Templates /parital view

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

@SaravananArunagiri ,@Stephen Muecke the partial views in which i used editor templates which append in "td_serial" below "ShowModel" in main view — it'sME, Jul 22 '15 at 10:24
is that value enter in td_serial and go to next text box check the serial number exist in database is like username validation right? @it'sME — Saravanan Arunagiri, Jul 22 '15 at 10:27
Need a far better explanation of exactly what your issue is. — charlietfl, Jul 22 '15 at 10:29
Do you mean the textbox generated by `@Html.TextBoxFor(x => x.Machine_serial_no, ..)`? And are you wanting to validate only the values in the page or ensure that its unique with respect to all values taht currently exist in the database? — , Jul 22 '15 at 10:30
@SaravananArunagiri NO ! i just want to validate dynamically added text box that to check same value entered in those textbox. i just want client side validation — it'sME, Jul 22 '15 at 10:33
There are lots of validation scripts , and tutorials and many many posts on this site...what have you tried? — charlietfl, Jul 22 '15 at 10:34
@charlietfl i jjust want client side validation in editor templates , in which dynamically text box will be append in main view ,bt i have to make sure that those text boxes contain only unique values — it'sME, Jul 22 '15 at 10:35
i post some javascript validation if u want like that modify as your self @it'sME — Saravanan Arunagiri, Jul 22 '15 at 10:39
thanks for ur interest . Let me explain in detail. My system should add Multiple serial and mac address in once ,for that user will ask how many serial no he want to enter ,Let say 2 , so he will enter 2 in textbox i.e count and press add button Which i've shown in jquery above then 2 rows of text boxes will be append than he will enter serial no . bt i want to make sure that each text box appended should contain only unique values and no text box should be null — it'sME, Jul 22 '15 at 10:47
@it'sME, Again, Are you only wanting to validate that `Machine_serial_no` in the existing page are unique (and required) or do you want to validate against any existing `Machine_serial_no` values which may already exist in the database? — , Jul 22 '15 at 10:52
@Stephen Muecke i just want client side validation ,bt if u give me the solution for server side vlidation also i wil be gerat ful to u — it'sME, Jul 22 '15 at 10:54
You most definitely do not want **just** client side validation (never trust user input - a malicious user can override your posted values so you must always do server side validation). But you have still not answered my query- please read my last comment again — , Jul 22 '15 at 10:56
@StephenMuecke thank u so much 4 ur time .i 've already done server side validation ,now i just want to compare values within multiple dynamically added text box through client side. i want to make sure no same Machine_serial_no to entered — it'sME, Jul 22 '15 at 11:12
OMG For the 3rd time. Do you want to compare only the values of the textboxes on the page or do you also want to compare against existing values in the database as well. — , Jul 22 '15 at 11:13
@StephenMuecke be cool.....i want to compare only the values of the textboxes on the page — it'sME, Jul 22 '15 at 11:18
I can give you an answer, but first you need to update your question to clearly explain which property you want to compare (i'm guessing its `Machine_serial_no`), and that you only want to compare against values in the page — , Jul 22 '15 at 11:22

score 0 · Answer 1 · answered Jul 22 '15 at 10:38

0

I think this is you want to validate client side

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

                });       

        });

answered Jul 22 '15 at 10:38

Saravanan Arunagiri

585
1
5
27

this is not scaleable for multiple dynamically created elements to compare against. – charlietfl Jul 22 '15 at 10:46
@Saravanan success: function (response) { $('#ShowModel').show(); $('#td_serial').prepend(response); $('#count').val(0); } – it'sME Jul 22 '15 at 10:57
@charlietfl is it possible using unobtrusive rebinding? – it'sME Jul 22 '15 at 10:59

score 0 · Accepted Answer · answered Jul 22 '15 at 12:19

Assuming you want to alert the user as soon as they enter a non unique value, then you need to handle the .change() event of the textbox, and since the textboxes are being added dynamically, you need to use event delegation

$('#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!');
  }
});

Note the alert('not unique!') is just for testing purposes - its not clear how you want to notify the user - e.g. include a div with an error message that your might show/hide as required

Next your partial includes @Html.ValidationMessageFor(x => x.Machine_serial_no) suggesting you have validation attributes. In order to get client side validation for dynamically created elements you need to re-parse the validator when the new elements have been added. Modify your script to

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

Side note - consider modifying this so that you only re-parse once all ajax calls are complete

Note also that you should only have one @Html.ValidationSummary(true) (your currently is adding one for each partial) and you need to remove the scripts from the partial - your should have one copy of the scripts only in the main view

Also created a [simple fiddle](http://jsfiddle.net/sLu4xLh3/) to show how the script works for testing unique values — , Jul 22 '15 at 12:24
if i want to add multiple serial_no from a xls file how can i run the same validation discussed above... — it'sME, Jul 23 '15 at 04:21
You need to ask a new question for that - your going to have to parse the values from your file into your model object (not really my area of expertise). And if you do ask it, make sure its a bit better that this one - i.e. clearly explains what your wanting to achieve, shows only the relevant code (the code in this question could be cut down to about 20% of what you showed) and explain whats not working and/or what errors you are getting :) — , Jul 23 '15 at 04:26

how to insert only unique value in Editor templates in mvc

2 Answers2