Question

我正在尝试调整以下代码

$(“#artistSearch”).submit(function (event) {  
    event.preventDefault();  
    var form = $(this);  
    $.ajax({
        url: form.attr(“action”),
        data: form.serialize(),
        beforeSend: function () {
        $(“#ajax-loader”).show();
    },
    complete: function () {
        $(“#ajax-loader”).hide();
    },
    error: searchFailed,
    success: function (data) {
        $(“#artistTemplate”).tmpl(data).appendTo(“#artist-list”);
    }
});

来自Professional ASP.NET MVC 3的

允许在同一表单中搜索和返回数据，最后得到以下结果：

在单独的脚本文件

上

$(function () {

    $("#btnSearch").click(function (event) {
     event.preventDefault();
    var idno = $("#txtIdNo").value;

     $.ajax({
         url: "/Owner/Search",
         type: "POST",
         data: idno,
         datatype: "json",
         beforeSend: function () {
             $("#FullName").html("");
             $("#OwnerId").html("");
             $("#notFound").html("");
             $("#ajax-loader").show();
         },
         complete: function () {
             $("#ajax-loader").hide();
         },
         error: function () {
             $("#notFound").html("Sorry, no data returned."); ;
         },
         success: function (data) {
             $("#OwnerId").html(data.OwnerId);
             $("#FullName").html(data.FullName);
         }
     });
 });

});

在控制器上

    [HttpPost]
    public JsonResult SearchById(string idNo)
    {
        var owner = _ownerService.FindBy(x => x.IdNo == idNo);
        return  Json(owner);
    }

在视图

上

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <div>
            <p>
               Id No:
               <input type="text" name="txtIdNo"  />
               <input type="button" value="Search" name="btnSearch" />
               <label id="notFound"></label>
            </p> 
        @Html.Hidden("OwnerId")
       .
       .
       .

       <p>
          <input type="submit" value="Create" />
       </p>
    </fieldset>
}

我使用的原因在视图中是避免在同一表单中有两个提交按钮，因为我在点击搜索按钮后意识到表单正在验证。

在没有问题之前，我也查看了建议的类似问题。

我无法完成上述工作，并感谢您提供的任何帮助。

我是MVC3和JQuery的新手

Answer 1

您使用表单的方式（抓取您正在搜索的字段值并将其发送到控制器操作）您可以通过按钮来避免提交;

<button type="button">Create</button>

或

<input type="button" value="Create" />

这是避免回发的最快方法。

您还可以查看ajaxSubmit（jQuery插件），或者您可以使用Ajax.BeginForm而不是Html.BeginForm（但这些都需要更多时间）

Answer 2

jquery ID Selector（“＃id”） - 选择具有给定id属性的单个元素。

您正在使用jquery ID Selector，但是您没有在from元素上使用id属性。

为表单元素添加id属性。

<input type="text" name="txtIdNo"  />
<input type="button" value="Search" name="btnSearch" />

to 

<input type="text" id="txtIdNo" name="txtIdNo"  />
<input type="button" id="btnSearch" value="Search" name="btnSearch" />

编辑jQuery ajax函数：数据：{idNo：idno}

$.ajax({
         url: "/Owner/Search",
         type: "POST",
         data: {idNo:idno},
         datatype: "json",
         .........
     });
 });

MVC3 JQuery-Ajax搜索

2 个答案: