查看: 2670|回复: 6

Ajax 部分刷新后，MINIUi 无效？？ [复制链接]

chengang4314

高级会员

Rank: 4

电梯直达

楼主

发表于 2014-8-25 17:48:00 |只看该作者 |倒序浏览

Index 页面引用了miniui 的 boot.js。

Index 页面
<div id="LeftMenu" class="ui-layout-west" style="overflow: hidden">
@Html.Action("Left")
</div>
<div class="ui-layout-center  ui-widget-content" id="Main" name ="Main">
@Html.Action("ProjectTypeIndex")
</div>

<script>
   function ReloadLeftTree() {
      $("#LeftMenu").load("/ProjectTypeManage/Left");
   }
</script>

当我在@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "Main", HttpMethod = "Post",OnSuccess = "ReloadLeftTree() }))
当我提交一个编辑页面后，更新Main 这个DIV 同时我想更新左边的菜单树。
所以我在OnSuccess = "ReloadLeftTree() 中重新加载树。
此时，miniui 无效，应该需要重新初始化？或者重新绑定之类的？？？请问该怎么操作，才能同时更新这两个DIV？？

收藏0

chengang4314

高级会员

Rank: 4

沙发

发表于 2014-8-25 17:49:13 |只看该作者

备注：如果我不使用miniui的话是可以刷新成功的。

dforce

超级版主

Rank: 8 Rank: 8

板凳

发表于 2014-8-25 20:42:10 |只看该作者

chengang4314 发表于 2014-8-25 17:49
备注：如果我不使用miniui的话是可以刷新成功的。

ui-layout-west这是什么
MiniUI的控件都是mini-layout这样的写法
mini-layout-west这样的是解析完的结构

chengang4314

高级会员

Rank: 4

地板

发表于 2014-8-26 09:14:12 |只看该作者

dforce 发表于 2014-8-25 20:42
ui-layout-west这是什么
MiniUI的控件都是mini-layout这样的写法
mini-layout-west这样的是解析完的结构 ...

布局没用miniui，只是树用了miniui.这个和问题没什么关系~

dforce

超级版主

Rank: 8 Rank: 8

5^#

发表于 2014-8-26 10:17:07 |只看该作者

chengang4314 发表于 2014-8-26 09:14
布局没用miniui，只是树用了miniui.这个和问题没什么关系~

请提供完整页面
从你贴的代码看不出leftMenu是MiniUI控件

chengang4314

高级会员

Rank: 4

6^#

发表于 2014-8-26 10:38:26 |只看该作者

dforce 发表于 2014-8-26 10:17
请提供完整页面
从你贴的代码看不出leftMenu是MiniUI控件

1:  Layout.cshtm

<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="../../App_Themes/InFrame/Content.css" rel="stylesheet" type="text/css" />
<link href="../../App_Themes/InFrame/InFrame.css" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.layout-latest.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-i18n.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/script.js")" type="text/javascript"> </script>
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" media="screen"  />
<link href="@Url.Content("~/Content/layout-default-latest.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive-custom-for-bootstrap.js")" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../Content/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="../../Content/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="../../Content/bootstrap-mvc-validation.css" />
<link rel="stylesheet" type="text/css" href="../../Content/bootstrap-sortable.css" />
<script src="../../Scripts/miniscripts/boot.js?123" type="text/javascript"></script>
<script src="../../Scripts/Common/SetMiniuiTreeSize.js?1243567" type="text/javascript"></script>
</head>

<body>
@RenderBody()
</body>
</html>

2: Index

@{Layout = "~/Views/Shared/_LayoutKilian.cshtml";}
<div id="errormsg">
</div>
<div id="LeftMenu" class="ui-layout-west" style="overflow: hidden">
@Html.Action("Left")
</div>
<div class="ui-layout-center  ui-widget-content" id="Main" name ="Main">
@Html.Action("

rojectTypeIndex")
</div>
<script>
   function ReloadLeftTree() {
      $("#LeftMenu").load("/ProjectTypeManage/Left");
   }
</script>

3

eft

@model List<Kilian.Model.DTO.ProjectTypeDto>
@{Layout = null;}
<ul id="demoTree" class="mini-tree" showTreeIcon="true" style="width:100%;height:100%;"
enableHotTrack="true" >
<li>
<span id="titlespan"><i class="icon-folder-open"></i>@Ajax.ActionLink("项目类型", "

rojectTypeIndex", new AjaxOptions { UpdateTargetId = "Main" })</span>
<ul>
      @foreach (var m in Model)
      {
<li>
      <span expanded="false">@Ajax.ActionLink(m.Name, "StageIndex", new { @pid = m.Id }, new AjaxOptions { UpdateTargetId = "Main" })  </span>
         <ul>
                  @foreach (var s in m.StageDtos)
                  {
                     <li>@Ajax.ActionLink(m.Name, "WorkIndex", new { @pid = m.Id }, new AjaxOptions { UpdateTargetId = "Main" })</li>
                  }
</ul>
      </li>
      }
</ul>
</li>
</ul>

4: AJAX提交页面后更新 Main 区域，同时在 OnSuccess 中调用 "ReloadLeftTree()" 来刷新左侧菜单树。

@model Kilian.Model.DTO.ProjectTypeDto
@*,OnSuccess = "ReloadLeftTree()",*@
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "Main", HttpMethod = "

ost",OnSuccess = "ReloadLeftTree()", }))
{
@Html.ValidationSummary(true)
<fieldset  class="form-horizontal">
      @Html.HiddenFor(model => model.Id)

            <div class="control-group">
         <label class="control-label" for="Code">编号</label>
      <div class="controls">
         @Html.EditorFor(model => model.Code, new { @class = "input-xlarge" })
         @Html.ValidationMessageFor(model => model.Code, null, new { @class = "help-inline" })
      </div>
      </div>

factory

超级版主

Rank: 8 Rank: 8

7^#

发表于 2014-8-26 11:01:05 |只看该作者

chengang4314 发表于 2014-8-26 10:38
1: Layout.cshtm

尝试在更新完之后,执行下mini.parse()

返回列表

		自动登录	找回密码
密码			立即注册