MVC3 jQuery的AJAX搜索

我試圖適應下面的代碼MVC3 jQuery的AJAX搜索

$(「#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

來源

2012-07-12 kagundajm

你什麼錯誤？ – Marc 2012-07-12 11:17:45

如果「我在視圖中使用的原因是爲了避免在同一個表單中提交兩個按鈕，因爲我在點擊搜索按鈕後意識到表單正在驗證。」是原因...看看http://stackoverflow.com/a/9022708/1182982 – Yasser 2012-07-12 11:24:39

@亞瑟我已經書籤引用的文章，並會通過它。 – kagundajm 2012-07-12 13:37:44

jQuery的ID選擇器（「#ID」） - 選擇具有給定id屬性的單個元素。

您正在使用jQuery ID選擇器，但您不具有來自元素的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功能：數據：{NO：IDNO}

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

來源

2012-07-12 11:35:47

我已經添加了ID選擇器，至少現在正在調用控制器。我唯一的問題是傳遞給控制器的空值。 – kagundajm 2012-07-12 13:34:57

查看已更新的答案。 – 2012-07-12 13:45:30

我已經將數據從數據更新到數據：{idNo：idno}，但仍然傳遞空值。我也試着改變var idno = $（「＃txtIdNo」）。 var idno = $（「＃txtIdNo」）。val（）;沒有成功。 – kagundajm 2012-07-12 14:24:20

您使用的形式的方式（去抓住你要搜索的字段值，並將其發送到控制器動作）你可以通過避免提交按鈕;

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

或

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

這將是避免回發的最快方式。

你也可以看看ajaxSubmit會（jQuery插件），也可以使用Ajax.BeginForm代替Html.BeginForm（但這些都需要多一點時間）

來源

2012-07-12 11:18:04 Hammerstein

MVC3 jQuery的AJAX搜索

回答

相關問題