PDA

View Full Version : [CLOSED] Help refreshing Viewport - Razor MVC ext 2.5



LAEUser
Oct 06, 2014, 10:20 AM
I have a layout page and a home controller with Index.cshtml that loads a viewport with a Tabpanel with the first tab as not closable. Through the menu navigation, I can add additional tabs. In the header section, I have a dropdown for which I monitor the onchange event in javascript. When the selection changes, I would like to reload the tabpanel or the entire Index.Cshtml page. I am able to close all the other tabs but I can not seem to reload the tabpanel or the Tab called Home. I am trying to do this client side from JS script. Any suggestions. Thanks

my layout page


@using Ext.Net;
@using Ext.Net.MVC;
@{
var X = Html.X();
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>@Html.MvcSiteMap().SiteMapTitle() - Shared Layout</title>

@Html.X().ResourcePlaceHolder(ResourceMode.ScriptF iles)

@Styles.Render("~/Content/themes/base/css")

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/toastr.css")

@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

@Scripts.Render("~/Scripts/json_eval.js")
@Scripts.Render("~/Scripts/toastr.js")
@Scripts.Render("~/Scripts/linq.js")
@Scripts.Render("~/Scripts/jquery.blockUI.js")
@Scripts.Render("~/resources/js/MainApp.js")

@RenderSection("headtag", false)
</head>
<body>
@X.ResourceManager(new MvcResourceManagerConfig()).Theme(Ext.Net.Theme.Gr ay)

<div class="container-fluid">
<!-- Top Bar -->
<div id="top-bar" class="open">
<!-- Container -->
<div class="container-fluid">
<!-- Left Nav -->
<ul class="links pull-left hidden-xs">
<li><a href="#"><i class="fa fa-envelope"></i>support@domain.com</a></li>
<li><a href="#"><i class="fa fa-user"></i>Need Help? Call 800.537.7790</a></li>
</ul>
<!-- /Left nav -->
<!-- Right Nav -->
<ul class="links pull-right no-float-xs">
<li><a href="#"><i class="fa fa-paragraph"></i>Privacy Policy</a></li>
<li><a href="#"><i class="fa fa-copyright"></i>SDRMA Copyright ? 2007-2014</a></li>
</ul>
<!-- /Right nav -->
</div>
<!-- /Container-->
</div>
<!-- /Top Bar -->
<div class="row" style="margin-top:4px;">
<div class="col-lg-1 col-md-1">
<a href='@Url.Action("Index", "Home")' class="navbar-brand">
<i class="fa"></i>
</a>
</div>
<div class="col-lg-9">
<div class="navbar navbar-static-top">
<!-- Static navbar -->
<nav class="navbar navbar-default fhmm" role="navigation">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#defaultmenu" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="defaultmenu" class="navbar-collapse collapse">
<!-- /Nav Buttons -->
@Html.MvcSiteMap().Menu("BootstrapMenuHelperModel", false)
</div><!--/.nav-collapse -->
</nav>
</div>
</div>
<div class="col-lg-2">
@Html.Partial("_LoginPartial")
</div>
</div>

<div class="row" style="padding-right:20px;">
<form class="navbar-form navbar-right" role="search" id="searchMembers">
<div class="form-group">
<input type="text" id="details" class="alert alert-info" readonly="readonly" value="@ViewBag.Org.ID" width="300" />
<input type="text" id="cboMembers" class="typeahead" data-provide="typeahead" autocomplete="off" value="@ViewBag.Org.Name" />
</div>
</form>
</div>
</div>

<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
@RenderSection("MainContent", true)
</div>
</div>
</div>

@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
@Scripts.Render("~/resources/js/addtab.js")
@Scripts.Render("~/resources/js/loadmembers.js")

</body>
</html>





@{
ViewBag.Title = "Index Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
var X = Html.X();
}

@section headtag{

}

@section MainContent{

@(X.Viewport()
.ID("vpMain")
.Layout(LayoutType.Border)
.StyleSpec("background:#FFF;")
.Items(
X.TabPanel()
.ID("pnlCenter")
.Region(Region.Center)
.BodyPadding(5)
.Plain(true)
.Margins("135 0 0 0")
.Items(
X.Panel()
.ID("tbHome")
.Title("Home")
.ItemsFromPartial("~/Views/Home/Member.cshtml")
.BodyPadding(6)
.AutoScroll(true)
.Closable(false)

)
)
)
}






[HttpGet]
public ActionResult Index(string entityID)
{
_log.Debug("I am in the Home-Index");

var orgs = UserHelper.UserClient.GetOrganizationsForCurrentUs er();
if (orgs != null)
{
SDRMA.Domain.ListItemIDName org = null;

if (entityID.IsNullOrEmptyGuid())
{
org = orgs.FirstOrDefault();
}
else
{
org = orgs.Where(x => x.ID == entityID).FirstOrDefault();
}

ViewBag.Org = org;
}

return View();
}

Daniil
Oct 07, 2014, 4:45 AM
Hi @LAEUser,

With your configuration I don't see any way to reload any individual part that you have mentioned. All the parts (including .RenderSection() and .ItemsFromPartial()) are constructed only when the entire page is requested.

You can reload the entire page by this JavaScript page:

window.location.reload();


Though, it is probably not that you are looking for, isn't?

If you need a way of loading partial views dynamically on demand and have a possibility to reload via an AJAX request (DirectEvent or DirectMethod) it without reloading the entire page, please investigate these examples:
http://mvc.ext.net/#/search/partial