Hello there,
Please write me a suggestion to my problem:
My _Layout.cshtml file looks like this:
<html>
<head>
<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2017.3.1018/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2017.3.1018/kendo.moonlight.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2017.3.1018/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.3.1018/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.3.1018/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.3.1018/cultures/kendo.culture.hu-HU.min.js")"></script>
<script type="text/javascript">
function refreshPartialView(e) {
var selected = this.dataItem($(e.item));
var id = selected.Id;
var result = $.ajax({
url: '@Url.Action("GetSiteInfoSearchResult", "SiteInfo")',
method: 'GET',
data: { id: id },
dataType: 'text',
async: false,
success: function (response) {
$('#tabStripPartial').html(response);//show the tabstrip
$('#gridSerialSearchResult').html('');//and clear the other partial... :(
}
});
}
function refreshSerialGrid(e) {
var selected = this.dataItem($(e.item));
var result = $.ajax({
url: '@Url.Action("GetSerialSearchResult", "Jegyzokonyv")',
method: 'GET',
data: { id: selected },
dataType: 'text',
async: false,
success: function (response) {
$('#gridSerialSearchResult').html(response);//show the gridview
$('#tabStripPartial').html('');//and hide the other partial view
}
});
}
</script>
<script>
$(document).ready(function () {
$("#searchBox").kendoAutoComplete({
dataSource: {
transport: {
read: {
url: "/SiteInfo/GetSiteInfos"
}
}
},
dataTextField: "Nev",
placeholder: "Search site...",
autoWidth: true,
select: refreshPartialView
});
});
$(document).ready(function () {
$("#searchSerial").kendoAutoComplete({
dataSource: {
transport: {
read: {
url: "/Jegyzokonyv/GetSerials"
}
}
},
placeholder: "Search serial...",
autoWidth: true,
filter: "contains",
select: refreshSerialGrid
});
});
</script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">@Html.ActionLink("Home", "Index", "Home")</p>
</div>
<div class="float-right">
@(Html.Kendo().Menu().Name("navmenu").Items(i =>
{
if (Request.IsAuthenticated)
{
i.Add().Text("Search").Content("<input id='searchBox'/>");
i.Add().Text("Tools").Items(children =>
{
children.Add().Text("Reports").Items(children2 =>
{
children2.Add().Text("Report 1");
children2.Add().Text("Report 2");
children2.Add().Text("Report 3");
});
children.Add().Text("Search serial").Content("<input id='searchSerial'/>");
children.Add().Text("Account");//The problem is here, if I add Action("Index","Manage")
children.Add().HtmlAttributes(new { @class = "k-separator" });
children.Add().Text("Logout").HtmlAttributes(new { onClick = "javascript:document.getElementById('logoutForm').submit()" });
});
}
else
{
i.Add().Text("Login").Action("Login", "Account");
}
i.Add().Text("Contact").Action("Contact", "Home");
}))
</div>
</div>
@using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
{
@Html.AntiForgeryToken()
}
</header>
<div id="body" class="container">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix" id="mainBody">
@RenderBody()
@if (Request.IsAuthenticated)
{
@Html.Partial("_TabStripPartial")
@Html.Partial("_SerialKeresoPartial")
//or this???
//@RenderPage("_TabStripPartial.cshtml")
//@RenderPage("_SerialKeresoPartial.cshtml")
}
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2015-@DateTime.Now.Year</p>
</div>
</div>
</footer>
</body>
</html>
Now as you can see, the site has a menu when user is not logged in with Login and Contact buttons only. After successful login
the user get the additional menu items. The 'Featured' section is still there.
I want to get the 2 serach result partial view and the account manage page to be shown on the same place. It's working when I only enable those 2 search partial view: at Javascript I fill one of them and clear the other. I hate this solution, do you have any other suggestion?
The _TabStripPartial view contains @Html.Kendo().TabStrip() element and the _SerialKeresoPartial view contains a @Html.Kendo().Grid(Model) grid with local data binding. Both works.
My questions:
1 - is it possible to get independent pages (depending on the menu selection) to body with removing the Featured section (I only want to see this section when the user hasn't made any interaction yet)
2 - is it possible to embed AutoComplete in Menu without that Javascript solution?
3 - after selecting item in either the first Autocomplete or in the other, how can I show those partial view in body and only the selected partial view, not both.
4 - if I add this Action("Index","Manage") after the account menu item, the site crashes at the first @Html.Partial part because of invalid operation (account management uses different model that this tabstrip partial view). How can I create more pages (including this account management) and show them on the same place in body?
Thanks
Attila
1 Answer, 1 is accepted
Regarding your first question - you can set the Action of the MenuItems, pointing to the needed controller and action that should return the needed partialView. Then you can subscribe for the click event of the Menu, in order to initiate an ajax request to the controller method and inject the html of the partialVie to a container in your body:
<script> $(document).ready(function (e) { $("ul.k-menu li.k-item a.k-link").click(function (event) { // Prevent default event handling for the menu items event.preventDefault(); }); }) function onSelect(e) { var url = $(e.item.innerHTML).attr('href'); // Call the controller action $.ajax({ type: 'GET', url: url, success: function (response) { // Update the content div debugger $('.content-wrapper').eq(1).html(response); } }); }</script>children.Add().Text("Reports").Items(children2 => { children2.Add().Text("Report 1").Action("MenuItem2", "Home");Regarding the AutoComplete - the demonstrated javascript is needed for the initialization of the widget, hence, this is the correct implementation in this scenario.
As for your third and fourth question - you can use the approach specified in the first suggestion.
Regards,
Nencho
Progress Telerik