I am creating a mobile compatible web application using Kendo Mobile UI. In my application, landing page is Login. After successful login, inbox of user having messages will be shown to user.
I want to implement slide effect after login. Means, the URL of application will remain same and only the content of the content will get rendered. Just like http://demos.kendoui.com/mobile/application/index.html
But the point is that I have to load view of Inbox after login.
To achieve this in MVC, I am using following code.
**On html page:**
@model Bluestone.App.Mobile.Models.ViewLoginModel
@{
ViewBag.Title = "Login";
}
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">
Login
</div>
</header>
</section>
<div data-role="view" data-title="Login" id="viewlogin" data-layout="default" data-transition="overlay:up">
<div id='loginHeader'>
<h2>
Please Log In</h2>
</div>
<div id='divLoginPanel'>
@Html.TextBoxFor(m => m.Email, new { @class = "txtUserName", @placeholder = " Enter Email" })
<span class="small-font value red ">@Html.ValidationMessageFor(m => m.Email)</span>
<br />
@Html.PasswordFor(m => m.Password, new { @class = "txtPassword", @placeholder = "Enter Password" })
<span class="small-font value red ">@Html.ValidationMessageFor(m => m.Password)</span>
<br />
<a data-click="submit" data-role="button">Login</a>
</div>
<script>
function submit(e) {
var ViewLoginModel= new Object();
ViewLoginModel.Username = $("#Email").val();
ViewLoginModel.Password = $("#Password").val();
$.ajax({ url: '@Url.Content("~/Account/Login")',
type: "POST",
data: ViewLoginModel,
success: function (response) {
if (response != null) {
$(document.body).append(response);
var app = new kendo.mobile.Application();
app.navigate('#inbox');
}
}
});
}
</script>
</div>
**And in Controller**
[HttpPost]
public ActionResult Login(ViewLoginModel model)
{
if (ModelState.IsValid)
{
if (ValidateUser(model.Email, password: model.Password))
{
return PartialView("Inbox");
}
}
return null;
}
**My Inbox View is**
<section data-role="layout" data-id="inbox-default">
<div data-role="footer">
<div data-role="tabstrip">
<a href="#actionsheet-view" data-icon="compose" >New</a>
<a href="#Sent" data-icon="action" >Sent</a>
</div>
</div>
</section>
<div data-role="view" data-init="viewInit" data-layout="inbox-default" data-title="Inbox"
id="actionsheet-view">
<ul id="inbox" data-role="listview" data-template="inboxItem" class="messageList">
</ul>
<ul data-role="actionsheet" id="options" data-popup='{"direction": "left"}'>
<li><a data-click="newMessage" id="btnnewMessage" href="javascript:void(0)" data-align="left"
data-role="button">New Message</a> </li>
<li><a id="btnAddInr" href="javascript:void(0)" data-action="addInr">Add INR</a></li>
</ul>
</div>
<div data-role="view" data-title="Sent" id="Sent" data-layout="inbox-default" data-init="SentInit">
<ul data-role="listview" id="SentInbox" data-template="inboxItem" class="messageList">
</ul>
</div>
Binding for the Inbox and Sent tabs is also there and my ajax request is also returning correct HTML. **But**, the layout i.e inbox-default is not applied when it gets rendered. Other way is to redirect to next view, but it will not give me slide effect which I want.
Kindly help on this.
Thanks in advance
I want to implement slide effect after login. Means, the URL of application will remain same and only the content of the content will get rendered. Just like http://demos.kendoui.com/mobile/application/index.html
But the point is that I have to load view of Inbox after login.
To achieve this in MVC, I am using following code.
**On html page:**
@model Bluestone.App.Mobile.Models.ViewLoginModel
@{
ViewBag.Title = "Login";
}
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">
Login
</div>
</header>
</section>
<div data-role="view" data-title="Login" id="viewlogin" data-layout="default" data-transition="overlay:up">
<div id='loginHeader'>
<h2>
Please Log In</h2>
</div>
<div id='divLoginPanel'>
@Html.TextBoxFor(m => m.Email, new { @class = "txtUserName", @placeholder = " Enter Email" })
<span class="small-font value red ">@Html.ValidationMessageFor(m => m.Email)</span>
<br />
@Html.PasswordFor(m => m.Password, new { @class = "txtPassword", @placeholder = "Enter Password" })
<span class="small-font value red ">@Html.ValidationMessageFor(m => m.Password)</span>
<br />
<a data-click="submit" data-role="button">Login</a>
</div>
<script>
function submit(e) {
var ViewLoginModel= new Object();
ViewLoginModel.Username = $("#Email").val();
ViewLoginModel.Password = $("#Password").val();
$.ajax({ url: '@Url.Content("~/Account/Login")',
type: "POST",
data: ViewLoginModel,
success: function (response) {
if (response != null) {
$(document.body).append(response);
var app = new kendo.mobile.Application();
app.navigate('#inbox');
}
}
});
}
</script>
</div>
**And in Controller**
[HttpPost]
public ActionResult Login(ViewLoginModel model)
{
if (ModelState.IsValid)
{
if (ValidateUser(model.Email, password: model.Password))
{
return PartialView("Inbox");
}
}
return null;
}
**My Inbox View is**
<section data-role="layout" data-id="inbox-default">
<div data-role="footer">
<div data-role="tabstrip">
<a href="#actionsheet-view" data-icon="compose" >New</a>
<a href="#Sent" data-icon="action" >Sent</a>
</div>
</div>
</section>
<div data-role="view" data-init="viewInit" data-layout="inbox-default" data-title="Inbox"
id="actionsheet-view">
<ul id="inbox" data-role="listview" data-template="inboxItem" class="messageList">
</ul>
<ul data-role="actionsheet" id="options" data-popup='{"direction": "left"}'>
<li><a data-click="newMessage" id="btnnewMessage" href="javascript:void(0)" data-align="left"
data-role="button">New Message</a> </li>
<li><a id="btnAddInr" href="javascript:void(0)" data-action="addInr">Add INR</a></li>
</ul>
</div>
<div data-role="view" data-title="Sent" id="Sent" data-layout="inbox-default" data-init="SentInit">
<ul data-role="listview" id="SentInbox" data-template="inboxItem" class="messageList">
</ul>
</div>
Binding for the Inbox and Sent tabs is also there and my ajax request is also returning correct HTML. **But**, the layout i.e inbox-default is not applied when it gets rendered. Other way is to redirect to next view, but it will not give me slide effect which I want.
Kindly help on this.
Thanks in advance