0

我正在尝试调整以下代码

$(“#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 的新手

4

2 回答 2

0

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

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

或者

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

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

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

于 2012-07-12T11:18:04.990 回答
0

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

您正在使用 jquery ID 选择器，但在 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 函数：data: {idNo:idno}

$.ajax({
         url: "/Owner/Search",
         type: "POST",
         data: {idNo:idno},
         datatype: "json",
         .........
     });
 });
于 2012-07-12T11:35:47.927 回答