加載部分視圖到按鈕點擊div沒有刷新頁面

我知道這個問題可能會重複，但我的查詢是不同的讓我解釋一下，我有一個下拉頁面，並通過選擇下拉列表中的值，我點擊提交按鈕..我希望通過點擊提交按鈕我需要加載部分視圖的標籤，這是所選下拉列表值的記錄列表。加載部分視圖到按鈕點擊div沒有刷新頁面

我想這：

$("#btnclick").click(function() { 
      $.ajax({ 
       type: 'POST', 
       url: '@Url.Content("~/Search/MDLNoDataList")', 
       data: mdlno, 
       success: function (data) { $("#viewlist").innerHtml = data; } 
      }); 
     });

，但沒有得到結果，而我會用這麼多的jQuery插件

<script src="../../Scripts/jquery-migrate-1.0.0.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>

來源

2013-02-09 IT_INFOhUb

如果我理解正確，下面是你需要做的。

HTML例子：

<div id="records"> 
</div> 
<select id="ddlRecordType"> 
<option value="1">Type 1</option> 
<option value="2">Type 2</option> 
</select> 
<input type="submit" value="Load Records" id="btn-submit" />

jQuery代碼

$(document).ready(function(){ 
$('#btn-submit').click(function(){ 
    var selectedRecVal=$('#ddlRecordType').val(); 
    $('#records').load('/LoadRecords?Id='+selectedRecVal); 
    return false; // to prevent default form submit 
}); 
});

這裏編號=是傳遞給服務器，以獲得所選項目的查詢字符串參數？落下。

編輯：下面的答案加入，因爲這個問題的內容從最初的交變

$("#btnclick").click(function() { 
     $.ajax({ 
      type: 'POST', 
      url: '@Url.Action("MDLNoDataList","Search")', 
      data: mdlno, 
      success: function (data) { 
       // $("#viewlist")[0].innerHtml = data; 
       //or 
       $("#viewlist").html(data); 
      } 
     }); 
     return false; //prevent default action(submit) for a button 
    });

來源

2013-02-09 11:24:48

我已經使用HTML助手類下拉列表... – 2013-02-09 11:37:54

<％= Html.DropDownList（「ddlMDLNo」，ViewData [「MDLno」] as SelectList，「--Select One--」，new {onchange =「TestFun（）」}）％> – 2013-02-09 11:38:26

我沒有問題將ID傳遞給控制器。我可以成功地將ID傳遞給控制器，並且我可以在局部視圖中成功獲取數據..但事情是這樣的..我只是想讓我的部分視圖與數據應該加載在div標籤中，當我點擊按鈕。 – 2013-02-09 11:41:53

需要AJAX用於這一目的。

$.get(url, data, function(data) { $(element).append(data) });

和部分視圖是模糊的。

element { 
    overflow:hidden; 
}

來源

2013-02-09 11:06:32

確保你從你的點擊處理程序返回錯誤取消表單提交的默認操作：

$("#btnclick").click(function() { 
    $.ajax({ 
     type: 'POST', 
     url: '@Url.Action("MDLNoDataList", "Search")', 
     data: mdlno, 
     success: function (data) { 
      $("#viewlist").html(data); 
     } 
    }); 

    return false; // <!-- This is the important part 
});

如果您使用的是WebForms視圖引擎而不是Razor，請確保使用正確的語法來指定url：

$("#btnclick").click(function() { 
    $.ajax({ 
     type: 'POST', 
     url: '<%= Url.Action("MDLNoDataList", "Search") %>', 
     data: mdlno, 
     success: function (data) { 
      $("#viewlist").html(data); 
     } 
    }); 

    return false; // <!-- This is the important part 
});

如果不返回false，形式簡單，當你點擊提交按鈕提交到服務器，瀏覽器從頁面重定向路程，顯然你的AJAX調用從未有時間去執行。

您還會注意到一些改進我到你原來的代碼所做的：

使用Url.Action助手，以便照顧到應用程序中定義的帳戶路線指向服務器端控制器操作時。
使用jQuery的.html()方法代替innerHTML來設置給定元素的內容。

來源

2013-02-09 12:51:08

加載部分視圖到按鈕點擊div沒有刷新頁面

回答

相關問題