Загрузите частичный вид в div на кнопку без обновления страницы

Question

Я знаю, что этот вопрос может быть повторен, но мой запрос отличается, поясняю, у меня есть выпадающее меню и выбирая значение в выпадающем списке, и я нажимаю Отправить кнопку. Я хочу, нажав кнопку отправки. Мне нужно загрузить частичный вид в теге, который является списком записей выбранного значения выпадающего списка.

я попытался это:

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

Answer 1

Если я правильно понимаю, ниже - то, что вам нужно сделать.

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 
}); 
}); 

Здесь Id = является параметр строки запроса передается на сервер, чтобы получить выбранный пункт в? падать.

Edit: был добавлен ответ ниже, а содержание вопрос изменилось от первоначального поста

$("#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 
    }); 

Answer 2

Вам нужны AJAX для этой цели.

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

и частичный вид, который является неопределенным.

element { 
    overflow:hidden; 
} 

Answer 3

Убедитесь, что вы отменить действие по умолчанию формы представления, возвращая ложное из обработчика щелчка:

$("#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 посмотреть двигатель и не Бритва убедитесь, что вы используете правильный синтаксис для указания 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 
}); 

Если вы не вернете ложно, форма просто отправляется на сервер при нажатии на кнопку отправки, браузер перенаправляет от страницы и, очевидно, ваш вызов AJAX не успевает выполнить.

Вы также заметите некоторые усовершенствования, которые я сделал к исходному коду:

• Использование помощника Url.Action при наведении на действие контроллера на стороне сервера, чтобы принять во внимание маршрутов, определенных в приложении.
• Использование метода jQuery .html() вместо innerHTML для установки содержимого данного элемента.