如何在按钮单击时在MVC3剃刀中添加动态文本框

Question

我想在按钮单击时动态创建文本框，并在另一个按钮单击时将其删除。 我用jquery做了它，工作正常。     

$(document).ready(function () {

    var counter = 2;

    $("#addButton").click(function () {
        if (counter > 10) {
            alert("Only 10 textboxes allow");
            return false;
        }

        var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().html('<input type="text" name="textbox' + counter +
      '" id="textbox' + counter + '" value="" >');

        newTextBoxDiv.appendTo("#TextBoxesGroup");


        counter++;
    });

    $("#removeButton").click(function () {
        if (counter == 1) {
            alert("No more textbox to remove");
            return false;
        }

        counter--;

        $("#TextBoxDiv" + counter).remove();

    });

    $("#getButtonValue").click(function () {

        var msg = '';
        for (i = 1; i < counter; i++) {
            msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
        }
        alert(msg);
    });
});
</script>

<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">       
    <input type="textbox" id="textbox1" />
</div></div><input type='button' value='Add Button' id='addButton' /><input type='button' value='Remove Button' id='removeButton' /><input type='button' value='Get TextBox Value' id='getButtonValue' />

但是我想用mvc3 razor这个功能。