[英]asp.net mvc Render a Partial View with Java Script
I want to make a Partial view that displays data in a table. 我想创建一个在表中显示数据的部分视图。
I will have a Select element with the services to choose from. 我将有一个Select元素,可以选择服务。
When the user Selects a Service in the combobox I want to the call a partial view with the service Id number: 当用户在组合框中选择服务时,我想要调用带有服务ID号的部分视图:
How can I do this? 我怎样才能做到这一点?
Here is a action method which will render the partialView 这是一个动作方法,它将呈现partialView
//
// GET: /Service/ServiceStatusLogs/1
public ActionResult ServiceStatusLogs(int id)
{
var db = new EFServiceStatusHistoryRepository();
IList<ServiceStatusHistory> logs = db.GetAllStatusLogs(id);
return View("_ServiceStatusLogs", logs);
}
Here is the main action method which returns the page: 这是返回页面的主要操作方法:
//
// GET: /Services/Status
public ActionResult Status()
{
IList<Service> services;
using (var db = new EFServiceRepository())
{
services = db.GetAll();
}
return View(services);
}
You can make use $.ajax functionality to achieve, check this :- 您可以使用$ .ajax功能来实现,请检查: -
//Combo box change event
$("#comboboxName").change(function () {
//Get service Id
var serviceId = $("#comboboxName").val();
//Do ajax call
$.ajax({
type: 'GET',
url: "@Url.Content("/Service/ServiceStatusLogs/")",
data : {
Id:serviceId //Data need to pass as parameter
},
dataType: 'html', //dataType - html
success:function(result)
{
//Create a Div around the Partial View and fill the result
$('#partialViewContainerDiv').html(result);
}
});
});
Also you should return partial view instead of view 你也应该返回局部视图而不是视图
//
// GET: /Service/ServiceStatusLogs/1
public ActionResult ServiceStatusLogs(int id)
{
var db = new EFServiceStatusHistoryRepository();
IList<ServiceStatusHistory> logs = db.GetAllStatusLogs(id);
return PartialView("_ServiceStatusLogs", logs);
}
Try this: 尝试这个:
public ActionResult ServiceStatusLogs( int id )
{
//Prepare your model
return PartialView( "UserDetails", model );
}
Any then use javascript(ajax) to load contents for an element of the DOM: 然后使用javascript(ajax)来加载DOM元素的内容:
$('#user_content').load('/Service/ServiceStatusLogs');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.