如何将 MVC 部分视图放入灯箱中
How to put MVC partial view into a lightbox?
所以我有一个共享的布局。我想在该布局上有一个搜索表单。进行搜索后,我想将结果返回到灯箱中。我不是JS最伟大的。这是我所拥有的:
共享布局:
<div id="search-form">
@Html.Action("Search", "RespondentSearch")
</div>
<div id="search-results">
</div>
控制器:
[HttpGet]
[Whitelist]
public ActionResult Search()
{
return PartialView("_SearchFormPartial");
}
[HttpPost]
[Whitelist]
public ActionResult Search(string query)
{
return PartialView("_SearchResultsPartial");
}
搜索表单部分视图:
@using (Ajax.BeginForm("Search", "RespondentSearch", FormMethod.Post,
new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
UpdateTargetId = "search-results"
},
new
{
@class = "sidebarSearch"
}
))
{
<div>
<input type="text" name="search" placeholder="respondent search..." id="ac" class="ui-autocomplete-input" autocomplete="off" />
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
<input type="submit" value="" rel="lightbox" />
</div>
}
搜索结果部分:(这整个表格是我想在灯箱内显示的)
<table>
<tr>
<td>Stuff in Here</td>
</tr>
</table>
我修复了它:
共享视图:
<div id="RespondentSearch">
@Html.Action("Search", "RespondentSearch")
</div>
<div id="search_results" style="display: none">
</div>
控制器:
[HttpGet]
[Whitelist]
public ActionResult Search()
{
return PartialView("_SearchFormPartial");
}
[HttpPost]
[Whitelist]
public ActionResult Search(string query)
{
return PartialView("_SearchResultsPartial");
}
共享视图中的表单(一切的核心)
<div class="sidebarSearch">
<input type="text" name="query" placeholder="respondent search..." id="ac" class="ui-autocomplete-input" autocomplete="off" />
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
<a href="#search_results" rel="lightbox" id="performSearch"></a>
</div>
<script>
$('#performSearch').on('click', function () {
$.ajax({
url: "@(Url.Action("Search", "RespondentSearch"))",
type: 'POST',
data: { query: $('#query').val() },
cache: false,
async: true,
success: function (result) {
$("#search_results").html(result);
}
});
});
</script>
相关文章:
- 无法在mvc视图中使用ajax调用获取操作返回的模型对象列表
- 我应该将MVC视图特定的javascript文件放在哪个文件夹中
- asp.net MVC,重定向到视图,视图打开新窗口到外部url,它'It’’’’我们被当成一种风景
- 使用javascript在MVC视图中解析.net JSON字符串
- 当我点击MVC视图中的图像时,如何打开另一个页面
- 阻止MVC视图中的C#代码在加载时执行
- MVC:使用Web窗体视图引擎在javascript中迭代Viewbag数组
- ajax.beginform() 不更新部分视图 MVC
- 在创建视图mvc.net的过程中使用javascript
- Razor视图MVC 5 JavaScript-解析document.getElementById
- 文本框开关,带有基于部分视图MVC 4的模式对话框上的单选按钮
- 从视图MVC通过javascript发布多个参数
- 在局部视图(MVC)中查找类并将变量传递给函数
- 在c#视图MVC 2中添加jquery
- 数组不是从视图MVC传递给控制器的
- 如何在Razor视图MVC中将javascript变量转换为c#字符串
- 部分视图MVC 2事件函数未定义
- 在javascript加载的部分视图MVC中发生错误时,重定向到错误页面
- 使用本地存储设置视图 MVC 中的值
- 在部分视图MVC中使用jquery/js