代码之家 › 专栏 › 技术社区 › Alex P

如何劫持dropdownlist变更触发的表单提交事件

asp.net-ajax asp.net-mvc-2 jquery

Alex P · 技术社区 · 15 年前

我一直在跟踪一些代码 'ASP.NETMVC正在运行'

网页

<% using (Html.BeginForm("SortCourseData", "Summary", FormMethod.Post, new { id = "summarysort"})) %>
<% { %>
<div id="sort"><%=Html.DropDownList("SortSelection", Model.sortList, new { onchange="this.form.submit();" })%> </div>         
<% } %>

呈现的HTML

<form action="/Summary/SortCourseData" id="summarysort" method="post">
    <div id="sort"><select id="SortSelection" name="SortSelection" onchange="this.form.submit();"><option>Incomplete</option>
    <option>By first name</option>
    <option>By last name</option>
    <option>By state</option>
    </select> </div>         
</form>

$('form#summarysort').submit(function(event) {
    event.preventDefault();
    var sortKey = $("#SortSelection").val();
    hijack(this, updateList, sortKey, "html")
});

function hijack(form, callback, sortKey, format) {
    $.ajax({
        url: '/Summary/SortCourseData',
        type: "POST",
        data: 'SortSelection=sortKey',
        dataType: format,
        success: callback
    });
}

function updateList(result) {
    $('div#datadisplayarea').html(result);
}

控制器

public ActionResult SortCourseData(string SortSelection)
    {
        SummaryViewModel m = new SummaryViewModel();
        SummaryViewData modelData = m.GetViewModelData(SortSelection);

        if (Request.IsAjaxRequest())
            return PartialView("SummaryCourseList", modelData);

        return View("Index", modelData);
    }

我遇到的问题是当我在dropdownlist中选择排序方法时 submit jquery中的事件不捕获该事件。如果我把一个简单的 alert(); 在代码块中,我没有收到提示它没有连接到表单提交事件的警报。

如何成功劫持表单提交事件,以便使用ajax更新课程表?任何指导将不胜感激。。。

3 回复 | 直到 15 年前

Quentin 15 年前

submit事件只在用户提交表单时触发,如果JavaScript提交表单则不会触发。

你需要修改 onchange 处理程序。

D.J 15 年前

尝试

$("#SortSelection").change(function(){
     $('form#summarysort').submit();
});

David Thomas 15 年前

<form action="" method="get">
<label for="sortBy">Sort by:</label>
<select id="sortBy" name="sortBy">
    <option value="0">id</option>
    <option value="1">First name</option>
    <option value="2">Surname</option>
    <option value="3">Website</option>
</select>
<input type="submit" value="Sort table" />
</form>

<table id="sorting">
    <thead>
        <tr>
            <th>numerical Id</th>
            <th>first name</th>
            <th>surname</th>
            <th>website</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mike</td>
            <td>Masnick</td>
            <td>techdirt.com/index.php</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Randall</td>
            <td>Munroe</td>
            <td>xkcd.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Jerry</td>
            <td>Holkins</td>
            <td>www.penny-arcade.com</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Mike</td>
            <td>Krahulik</td>
            <td>www.penny-arcade.com</td>
        </tr>
    </tbody>
</table>

而不是使用Ajax(并攻击网络 每一个 用户希望对已加载的表重新排序的时间)我建议使用jQuery插件“ tablesorter “(或任何 equivalents

$(document).ready(
 function(){

    // hides the submit button (to avoid having to hijack the submit event)
    $('input:submit').remove();

    // sorts the table on load.
    $('#sorting').tablesorter();

    $('#sortBy').change(
        function() {
            // call the tablesorter plugin 
            var sortedBy = parseInt($('#sortBy').val());
               $("#sorting").tablesorter({
            // sort on the first column and third column, order asc 
               sortList: [[sortedBy,0]] 
         }); 
    })
 }
);

演示时间: JS Bin