部分视图问题 - 未定义jQuery

Question

部分视图问题 - 未定义jQuery

Sho*_*jaz 7 asp.net-mvc jquery asp.net-mvc-3 asp.net-mvc-4 asp.net-mvc-5

我在ASP.NET MVC 5项目中面临jQuery加载问题.我正在尝试加载部分视图,所以我已经使用过了

@ Html.Action("GetView","Home")

部分视图包含一些jQuery函数.当它加载时它显示jQuery未定义的消息,但jQuery正在主页上工作.

所以我尝试了另外两种方法来加载局部视图,并且没有使用这些方法的jQuery问题

@Html.Partial("_viewname")

@Ajax.BeginForm()

Run Code Online (Sandbox Code Playgroud)

家庭控制器

public class HomeController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetView(string id = "")
        {
           return PartialView("_ViewName");

        }
    }

Run Code Online (Sandbox Code Playgroud)

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("Head", false)
</head>
<body>
    <section >
        <div>
            @RenderBody()
        </div>

        <div>
            @RenderSection("Sidebar", false)
        </div>

    </section>

    <!-- jQuery -->
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("Scripts", false)
</body>

Run Code Online (Sandbox Code Playgroud)

父页面Index.cshtml

@{
    ViewBag.Title = "Admin";
}

<div id="main_content">
    @Html.Action("GetView", "Packages")
</div>

Run Code Online (Sandbox Code Playgroud)

部分视图_view.cshtml

<div class="row">
    <div class="col-sm-12">
        <select>
            <option>1</option>
            <option>2</option>
        </select>
    </div>
</div>


<script type="text/javascript">

    $(document).ready(function () {
        $("select").addClass("form-control");
    });

</script>

Run Code Online (Sandbox Code Playgroud)

我认为有一些jQuery加载问题,但我不明白为什么会发生特定的操作.

请建议我解决这个问题.

Answer 1

Gon*_*ing 15

您的视图(不是部分视图)需要将代码包含在@section Scripts块中.正如您所指出@section的那样,在部分视图中不起作用.

确保父视图中的代码是这样的:

@section Scripts{
    <script>
         // DOM ready handler if needed
         $(function(){
              // Your Javascript/jQuery code here
         });
    </script>
}

Run Code Online (Sandbox Code Playgroud)

该@section指令告诉视图构建器在母版页中插入此块的位置.使用Javascript,您需要它始终位于"脚本"部分中,否则它将在内联呈现它的位置.

另一种方法是将jQuery包含移到RenderBody()主页面中的调用之前:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("Head", false)
    <!-- jQuery -->
    @Scripts.Render("~/bundles/jquery")
</head>
<body>
    <section >
        <div>
            @RenderBody()
        </div>

        <div>
            @RenderSection("Sidebar", false)
        </div>

    </section>

    @RenderSection("Scripts", false)
</body>

Run Code Online (Sandbox Code Playgroud)

与使用捆绑包相关联的浏览器缓存意味着只有第一个页面加载在您的网站上效率会有点低.

归档时间：	11 年，5 月前
查看次数：	12810 次
最近记录：	8 年，7 月前