1

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

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

视图类看起来像：

@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。

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

4

2 回答 2

0

我已经为搜索请求准备了一个表格，但我没有提到我可以用它来解决这个问题，因为它需要不同的按钮来调用不同的方法。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的方式呈现响应。

于 2013-07-22T07:30:51.407 回答
0

您正在使用 

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

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

因此在 DOM 中，您正在渲染具有相同 ids('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);
        },
    });
于 2013-07-19T15:58:41.543 回答