This is a migrated thread and some comments may be shown as answers.

Kendo mobile ui with MVC - Render partial view using jquery ajax

4 Answers 208 Views
Application
This is a migrated thread and some comments may be shown as answers.
Todd
Top achievements
Rank 1
Todd asked on 01 May 2013, 04:27 PM
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

4 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 03 May 2013, 08:57 AM
Hi Todd,

I am not sure what happens here. The approach (while relatively unorthodox) should work, unless I am missing something. Are you by any change instantiating the mobile application twice (once for the initial login, and then again, after the ajax call is performed?). 

Kind regards,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Todd
Top achievements
Rank 1
answered on 03 May 2013, 12:55 PM
Thanks for your reply,

I reviewed my code and found that I am not instantiating the mobile application more than once. For more clarification I will be posting the .zip file of the sample code what I have done. So that you can review and can tell me what I am missing.

Many thanks.
0
Todd
Top achievements
Rank 1
answered on 03 May 2013, 01:37 PM
Hi Petyo,

One more thing, as you said that the approach I am following is "Relatively unorthodox", can you please guide me on the approach which I should follow? Just clarifying again what I need.

- I don't want to change the URL when I am redirecting user to new page and just want to update the UI.
- I do not have static pages and all of the further pages are dynamic.

Note: The very next page of the login i.e Inbox has three tabs New, Sent, Archived; which has its own functionality as well. These tabs have listing and will also redirect user to further views.

Many Thanks
0
Petyo
Telerik team
answered on 07 May 2013, 03:53 AM
Hello Todd,

As a general recommendation, I would suggest that you shift the rendering and databinding to the browser, using the server-side as a service layer (opposed to rendering HTML from the server). You may look into the various Kendo DataSource examples and our sample sushi app source code for more details. 

If you still experience troubles with your current approach, you may consider isolating it into a runnable sample (I think that you may omit the server-side and just use static HTML files) and send it to us. We will take a look.

Greetings,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Application
Asked by
Todd
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Todd
Top achievements
Rank 1
Share this question
or