Problem in writing a razor code in Script-CodePudding

This is my code. I want to create two textboxes using Razor in script.

the model=>model[i].Name1 is not woring

    var counter = 0;
    @{
        int i = 0;
    }
    $(document).ready(function () {
        $("#addButton").click(function () {
            if (counter < 0) {
                alert("Add more textbox");
                return false;
            }
            i = counter;
            var newTextBoxDiv = $(document.createElement('div'))
                .attr("id", 'TextBoxDiv'   counter).attr("class", 'TextBoxDiv').attr("style", "border:5px solid green");
            newTextBoxDiv.after().html('<label>Name #'  counter   ': </label>'  
                '@Html.EditorFor(model => model[i].Name1);'  
                '<br/> <label>Email #'  counter  ': </label>'  
               '@Html.EditorFor(model => model[i].EmailID);'  
                '<br/><input type="button" name="button'   counter  
                '"  id="removeButton'   counter   '" value="Remove Button" onclick="remove(this)">');
                   newTextBoxDiv.appendTo("#TextBoxesGroup");
                   alert(i.toString());
                   counter  ;
                   i = i   1;
        });
    });

CodePudding user response：

You cannot get JS to write out Razor - the JS happens client side AFTER the razor has been executed on the server and sent to the client. the JS won't know what to do with the razor syntax.

In this case, you would need to manually create the html which the Razor helper would make for you. It should still parse back into razor, providing you put the html in the right format (right name, id etc)

So write out the and make the name field match what the razor would have generated.

CodePudding user response：

You can try to set a js variable with the value of model,and then use <input/> to replace @Html.EditorFor():

var counter = 0;
var m = JSON.parse('@Json.Serialize(@Model)');
    $(document).ready(function () {
        $("#addButton").click(function () {
            if (counter < 0) {
                alert("Add more textbox");
                return false;
            }
            var newTextBoxDiv = $(document.createElement('div'))
                .attr("id", 'TextBoxDiv'   counter).attr("class", 'TextBoxDiv').attr("style", "border:5px solid green");
            newTextBoxDiv.after().html('<label>Name #'  counter   ': </label>'  
                '<input id="model_'   counter  '__Name1" name=" model['   counter   '].Name1" value="'   m[counter].Name1   '"/>'  
                '<br/> <label>Email #'  counter  ': </label>'  
               '<input id="model_'   counter  'EmailID" name=" model['   counter   '].EmailID" value="'   m[counter].EmailID   '"/>'  
                '<br/><input type="button" name="button'   counter  
                '"  id="removeButton'   counter   '" value="Remove Button" onclick="remove(this)">');
                   newTextBoxDiv.appendTo("#TextBoxesGroup");
                   counter  ;
        });
    });