在模态弹出对话框中打开视图 [英] Open view inside modal pop up dialog

问题描述

大家好，

我正在使用Ajax& amp ;;开发具有搜索，分页和排序功能的MVC4应用程序。局部视图。当ActionLink点击时，我有单独打开CRUD操作的视图。一切正常。现在我想以模态弹出方式打开它们。每当用户点击ActionLink时，模式弹出窗口将显示各自的视图。用户可以执行与普通视图相同的操作，完成后，模态弹出将消失更新数据的刷新局部视图。



For Create，Edit&细节，我使用@ Html.ActionLink和删除，我使用@ Ajax.ActionLink助手。我正在使用强类型视图。



如果不对现有应用程序进行如此多的更改，最有效的方法是什么。



更新问题：



我的BundleConfig.cs

  public   static   void  RegisterBundles（BundleCollection包）
 {
  //  为datepicker ISSSUE评论。 9月14日。 
  //   bundles.Add（new ScriptBundle（〜/ bundles / jquery）。包括（ 
  //  〜/ Scripts / jquery- {version} .js））;  
 
 bundles.Add（ new  ScriptBundle（  〜/ bundles / jqueryui）。包括（
  〜/脚本/ jQuery的UI- {版本}的.js））; 
 
 bundles.Add（ new  ScriptBundle（ 〜/ bundles / jqueryval）。包含（
  〜/ Scripts /jquery.unobtrusive *，
  〜/ Scripts / jquery.validate *< /跨度>））; 
 
 bundles.Add（ new  ScriptBundle（ 〜/ bundles / modernizr）。包含（
  〜/ Scripts / Modernizr的 -  *））; 
 
 bundles.Add（ new  StyleBundle（ 〜/ Content / css）。包含（ 〜/ Content / site.css ））; 
 
 bundles.Add（ new  StyleBundle（ 〜/ Content / themes / base / css）。包含（
  〜/ Content / themes / base / jquery.ui.core.css，
  〜/ Content / themes / base / jquery.ui.resizable.css，
  〜/ Content / themes / base / jquery.ui.selectable.css，
  〜/ Content / themes / base / jquery.ui.accordion.css，
  〜/ Content / themes / base / jquery.ui.autocomplete.css，
  〜/ C ontent / themes / base / jquery.ui.button.css，
  〜/ Content / themes / base / jquery.ui.dialog.css，
  〜/ Content / themes / base / jquery.ui.slider.css，
  〜/ Content / themes / base / jquery.ui.tabs.css，
  〜/ Content / themes / base / jquery.ui.datepicker.css，
  〜/ Content / themes / base / jquery.ui.progressbar.css，
  〜/内容/主题/碱/ jquery.ui.theme.css））; 
} 

我的_Layout.cshtml：



< pre lang =HTML> < ！DOCTYPE html >
< html >
< ; head >
< meta charset = utf-8 / >
< < span class =code-leadattribute> meta 名称 = < span class =code-keyword> viewport content = width = device-width / >
< title > @ ViewBag.Title < / title >
@ Styles.Render（〜/ Content / css）
@ Scripts.Render（〜/ bundles / modernizr）
< / head >
< body >
@RenderBody（）

@ Scripts.Render（〜/ bundles / jquery ）
@RenderSection（scripts，required：false）
< / body >
< / html >

我有什么尝试过：



用谷歌搜索解决方案之后，我提到了[这个]但没有运气。

解决方案

所以我选择这样做的方法是通过jquery利用bootstrap。在我看来，我将有一个链接/按钮和一个绑定它的点击事件。另外，在这个click事件中是一个ajax调用，用于加载partial并将其填充到模态窗口的主体中。

 @ *让我们调用这个index.cshtml并引用一个名为MyModalWindow * @ 
 <   script 的部分   type   =  text / javascript >  

（ function （）{
// 使用.on代替.click，我是lazy

（ ＃btn-show-modal).click( function （）{

Hi All,
I am developing MVC4 application with Searching, Paging and Sorting facilities using Ajax & Partial View. I had views for CRUD operations opening separately when ActionLink clicks. Everything working fine. Now I want to open them as modal pop up. Whenever user clicks on ActionLink, modal pop up will appear with respective view. User can able to perform operation same as normal view and after completing, modal pop up will disappear refreshing partial view with updated data.

For Create, Edit & Details, I used @Html.ActionLink and for delete, I used @Ajax.ActionLink helpers. I am using strongly typed views.

What is most efficient way to achieve this without making so much changes in existing application.

Updated Question :

My BundleConfig.cs

public static void RegisterBundles(BundleCollection bundles)
        {
            // COMMENTED FOR datepicker ISSSUE. ON Sep 14. 
            //bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            //            "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));
            
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }

My _Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

What I have tried:

After googled for solution, I referred [this] but with no luck.

解决方案

So the way I choose to do it is via jquery utilizing bootstrap. In my view I'll have a link/button and a click event tied to it. Also, in this click event is an ajax call to load the partial and populate it into the body of the modal window.

@*Lets call this index.cshtml and references a partial called MyModalWindow*@
<script type="text/javascript">

(function(){ //use .on instead of .click, i'm lazy

("#btn-show-modal").click(function(){

这篇关于在模态弹出对话框中打开视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！