Question

我有一个循环中不同字段的视图。根据模型，它应该创建尽可能多的字段作为循环的计数。这是页面的一个示例：

 _________     ___________     _________
|CONNECTOR|   |SEARCHINPUT|   |Selection|
|_________|   |___________|   |_________|
 ________________      ________________
|Add Search Field|    |Sub Search Field|
|_B_U_T_T_O_N____|    |_B_U_T_T_O_N____|

View类看起来像：

@model Modelle.Models.SearchModel
<table>
    @for (int i = 0; i < (int)Model.SearchCount; i++)
    {  <tr>
        <th>@if (i > 0)
            {<select name="ConnectorList" id="ConnectorList">
            <option value="AND" @(Model.ConnectorList.ElementAt(i - 1).Equals("AND") ? "selected" : "")>AND</option>
            <option value="OR" @(Model.ConnectorList.ElementAt(i - 1).Equals("OR") ? "selected" : "") >OR</option>
            <option value="NAND" @(Model.ConnectorList.ElementAt(i - 1).Equals("NAND") ? "selected" : "") >NAND</option>
            <option value="NOR" @(Model.ConnectorList.ElementAt(i - 1).Equals("NOR") ? "selected" : "") >NOR</option>
        </select>}
        </th>
        <th>
            <input name="SearchInput" id="SearchInput" type="text" value="@(Model.SearchList.ElementAt(i) as String)" /></th>
        <th>
            <select name="SelectionList" id="SelectionList">
                @for (int j = 0; j < Model.SelectedList.Count(); j++)
                {<option value="@j" @(Model.Selection.ElementAt(i).Equals(j) ? "selected" : "")>@(Model.SelectedList.ElementAt(j).Name as String)</option> 
                }
            </select>
        </th>
    </tr>}

</table>
<p>
    <button name="button" type="button" onclick="AddSearchField()">Add one more search field</button>
    <button name="button" type="button" onclick="SubSearchField()">Remove one search field</button>

这里是按钮的jquery代码：

function AddSearchField() {
    var value1 = $('#SearchInput').val();
    var value2 = $('#SelectionList').val();
    var value3 = $('#ConnectorList').val();
    $.ajax({
        url: "@Url.Action("AddSearchField", "Search")",
        type: 'POST',
        chache:false,
        data: 'searchInput=' + value1 + '&selectionList=' + value2 + '&connectorList=' + value3,
            success: function (response) {
                $('#OpenSearchInput').html(response);
            },
   });
    }
    function SubSearchField() {
        var value1 = $('#SearchInput').val();
        var value2 = $('#SelectionList').val();
        var value3 = $('#ConnectorList').val();
        $.ajax({
            url: "@Url.Action("SubSearchField", "Search")",
            type: 'POST',
            chache: false,
            data: 'searchInput=' + value1 + '&selectionList=' + value2 + '&connectorList=' + value3,
            success: function (response) {
                $('#OpenSearchInput').html(response);
            },
        });
}

控制器代码：

public PartialViewResult AddSearchField(List<String> searchInput, List<int> selectionList, List<String> connectorList)
        {
            SearchModel searchModel = new SearchModel();
            if (connectorList == null)
            {
                connectorList = new List<String>();
            }
            searchModel.ConnectorList = connectorList;
            searchModel.Selection = selectionList.ToList();          
            searchModel.SelectedList = setSearchFields();
            List<String> searchList = new List<String>();
            int row = searchInput.Count();
            searchModel.SearchList = searchInput.ToList();
            searchModel.SearchList.Add("search");
            searchModel.SearchCount = row + 1;
            searchModel.ConnectorList.Add("AND");
            searchModel.Selection.Add(0);
            return PartialView("SearchInput", searchModel);
        }
        public PartialViewResult SubSearchField(List<String> searchInput, List<int> selectionList, List<String> connectorList)
        {
            SearchModel searchModel = new SearchModel();
            if (connectorList == null)
            {
                connectorList = new List<String>();
            }
            searchModel.ConnectorList = connectorList;
            searchModel.Selection = selectionList.ToList();          
            searchModel.SelectedList = setSearchFields();
            List<String> searchList = new List<String>();
        int row = searchInput.Count();
        searchModel.SearchList = searchInput.ToList();
        if (searchInput.Count() > 1)
        {
            searchModel.SearchList.RemoveAt(searchInput.Count() - 1);
            searchModel.SearchCount = row - 1;
            searchModel.ConnectorList.RemoveAt(connectorList.Count() - 1);
            searchModel.Selection.RemoveAt(selectionList.Count() - 1);
        }
        else
        {
            searchModel.SearchCount = row;
        }
        return PartialView("SearchInput", searchModel);
    }

如果我正常加载页面，它有一个搜索行。如果我按下“再添加一个搜索字段”按钮，则会添加一行。如果我第二次点击它没有任何反应。如果我单击“删除一个搜索字段按钮（随时）”，第二个字段将消失。在调试模式下，我可以在控制器中看到每次列表只计数为1。

有人知道我哪里弄错了吗？知道任何人更容易添加线条吗？我必须稍后将所有输入发送到控制器，以根据输入在具有不同规则的数据库中进行搜索。

Answer 1

您正在使用

<input name="SearchInput" id="SearchInput" type="text" value="@(Model.SearchList.ElementAt(i) as String)" />

和所有其他表单元素以及for循环。

因此在DOM中，您使用相同的ID呈现多个字段（'SearchInput'，'ConnectorList'，'SelectionList'）

var value1 = $('#SearchInput').val();只为value1，

分配一个字符串值

data: 'searchInput=' + value1 这里的value1只有一个搅拌器。

删除表单元素的ID 将您的ajax调用更改为

$.ajax({
        url: "@Url.Action("SubSearchField", "Search")",
        type: 'POST',
        cache: false,
        data: $('#the form tag id').serialize(),
        success: function (response) {
            $('#OpenSearchInput').html(response);
        },
    });

Answer 2

我已经获得了搜索请求的表单，但我没有提到我可以使用它来解决这个问题，因为它需要不同的按钮来调用不同的方法。来自Andrey Shchekin的小型解决方法安全地度过了我的一天（http://blog.ashmind.com/2010/03/15/multiple-submit-buttons-with-asp-net-mvc-final-solution/），所以我可以使用这个表格来解决我的问题。视图类现在看起来像：

@model Modelle.Models.SearchModel
<table>
    @for (int i = 0; i < (int)Model.SearchCount; i++)
    {  <tr>
        <th>@if (i > 0)
            {<select name="ConnectorList" id="ConnectorList">
            <option value="AND" @(Model.ConnectorList.ElementAt(i - 1).Equals("AND") ? "selected" : "")>AND</option>
            <option value="OR" @(Model.ConnectorList.ElementAt(i - 1).Equals("OR") ? "selected" : "") >OR</option>
            <option value="NAND" @(Model.ConnectorList.ElementAt(i - 1).Equals("NAND") ? "selected" : "") >NAND</option>
            <option value="NOR" @(Model.ConnectorList.ElementAt(i - 1).Equals("NOR") ? "selected" : "") >NOR</option>
        </select>}
        </th>
        <th>
            <input name="SearchInput" id="SearchInput" value="@(Model.SearchList.ElementAt(i) as String)" /></th>
        <th>
            <select name="SelectionList" id="SelectionList">
                @for (int j = 0; j < Model.SelectedList.Count(); j++)
                {<option value="@j" @(Model.Selection.ElementAt(i).Equals(j) ? "selected" : "")>@(Model.SelectedList.ElementAt(j).Name as String)</option> 
                }
            </select>
        </th>
    </tr>}

</table>
<p>
    <button name="AddSearchField" type="submit">Add one more search field</button>
    <button name="SubSearchField" type="submit"">Remove one search field</button>

以上表格的视图：

@model Tumormodelle.Models.SearchModel
<h2>Search Request</h2>
<fieldset>
    <legend id="SearchInputHeadline">Here you can Search for all accessible TumorModels</legend>
    <b>@ViewBag.Message2 </b>
    @using (Ajax.BeginForm("Action", "Search", null, new AjaxOptions { HttpMethod = "post"}, new { id = "SearchForm" }))
    {      
                 Html.RenderPartial("SearchFields");
                Html.RenderPartial("SearchFilter");
    <p>
            <button name="SearchForTumorModels" class="submitSearchForm" value="OpenSearchOutput" type="submit">Search for tumor models</button>
            <button name="button" type="submit">Clear the search form</button>
    </p>}
</fieldset>

通过这种方式，我不需要任何jquery，而是需要一个新类来处理不同的按钮并将它们重定向到正确的方法：

 public class HttpParamActionAttribute : ActionNameSelectorAttribute
    {
        public override bool IsValidName(ControllerContext controllerContext, string actionName, MethodInfo methodInfo)
        {
            if (actionName.Equals(methodInfo.Name, StringComparison.InvariantCultureIgnoreCase))
                return true;

            if (!actionName.Equals("Action", StringComparison.InvariantCultureIgnoreCase))
                return false;

            var request = controllerContext.RequestContext.HttpContext.Request;
            return request[methodInfo.Name] != null;
        }
    }

最后但并非最不重要的是，我必须将[HttpParamAction] [AcceptVerbs(HttpVerbs.Post)]放入控制器中的方法。主要问题现在已经解决，但它仍然是一个小问题。根据按钮，它应该在不同的div中呈现响应。

从循环创建的输入字段向mvc控制器发送数据

2 个答案: