2

I have an existing ASP.net 4.5 webforms application that I want to make into a "WebApp"-like application for mobile browsers.

What I'm mainly interested in is the graphics / sizing / scaling aspect, since the WebForms site works well with mobile browsers already, but it looks ugly and not "mobile" at all.

Reading around, I came across jQuery mobile, which at a glance seems perfect: just including it in my website turns every element of the page "mobile friendly" (fixed page size, big buttons and elements, auto stretching, etc.).

But my initial enthusiasm was short lived: as soon as I tried to use the website, I noticed that while the graphics were perfect, including JQ mobile broke almost all the logic, for example:

  • DropDownLists stopped generating postbacks
  • Clicking on LinkButtons stopped working (nothing happens on click)
  • UpdatePanels broke completely (the ajax calls don't fire anymore)
  • MultiViews broke completely (they get reset to the initlia View on every postback)

Am I doing something wrong, or is it just that WebForms and JQuery Mobile are just incompatible?

If they are incompatible, can anyone suggest an alternative to make my website look like a mobile web app (other than re-designing everything by hand that is).

Improve this question

2 Answers 2

Reset to default
2

I use asp.net webforms in conjunction with jQuery Mobile and they can work well together. However it takes some forethought and planning, and probably some new ways of doing things compared to the traditional webforms approach. So converting an existing webapp is not as quick and simple as you would like.

Some hints:

If you are using a single aspx page with multiple data-role="page" elements, consider putting all of them within one FORM element so that asp.net postbacks/updatePanels can work.

For linkbuttons, you will most likely need to turn off the default AJAX loading of page links in jQM.

In many cases, instead of using postbacks on controls, use client-side scripts to make async calls via PageMethods in the codebehind, or WebMethods in a WebService(asmx). If you are more comfortable with UpdatePanels, these should still work if you have everything inside a form tag and a scriptmanager within the form tag too.

DropDowns do get restyled by jQM, so you might want to catch the change event in javascript and then either use async calls or fire the postback via javascript.

Here are some other opinions:

JQuery-Mobile and ASP.Net - AJAX or Postback?

How to mix jQuery Mobile and ASP.NET

jQueryMobile in ASP.NET WebForm

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

If you choose to have Ajax enabled with jquery mobile JQM [which is preferred when using JQM to give the user feeling a native app], you won't have the post back anymore. That is not good because you would lose a lot of built in features like validation controls, built in request validations....

So, one of the options would be using WCF restful service and have it compatible with asp.net (by having this in the web config: serviceHostingEnvironment aspNetCompatibilityEnabled="true"). In this case, you need to mitigate security threats like script injection and cross side request forgery and .... inside with the WCF service as there is no built in request validation.

And now some JQM gotchas:

In order to avoid a lot of surprise, you may have only one page in the DOM by removing previous page from the DOM. This way, you don't need to worry about having multiple items with the same id in the DOM.

The other thing is binding events. if you have a java script in you master page and you have let say a click event to bind, make sure to use one instead of on. otherwise, it behaves unexpectedly.

For the client side validation jquery validation works fine and easy to use and no conflict with JQM.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.