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

5 posts, 0 answers
  1. Todd
    Todd avatar
    4 posts
    Member since:
    Mar 2012

    Posted 01 May 2013 Link to this post

    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
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 03 May 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Todd
    Todd avatar
    4 posts
    Member since:
    Mar 2012

    Posted 03 May 2013 Link to this post

    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.
  5. Todd
    Todd avatar
    4 posts
    Member since:
    Mar 2012

    Posted 03 May 2013 Link to this post

    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
  6. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 06 May 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready