Tag Archives: Jquery

Jquery

[RESOLVED]fast paging for large numbers of data

which is the easy way to create fast paging for large amount of data more than 10 thousand

tried out ajax paging but taking too much time

nuget paged list fetch all the data which makes the site slow

now how to do the paging please suggest

plus it has a search form i want a paging which maintain search result for it

Hi,

For large amount of data, we need to make paging at the server side. You may see

http://www.asp.net/mvc/tutorials/getting-started-with-ef-5-using-mvc-4/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application.

It may help.

Have fun

How many records do you show in 1 page? You need to get only that many records from the DB. Refer below link for DB paging 

http://social.technet.microsoft.com/wiki/contents/articles/23811.paging-a-query-with-sql-server.aspx 

How many records retrieving from db

If you are getting all 10000 from db and handling front-end the here is my idea.

1. Define a store proc in the back to return only the specific page records and count variable

   search proc should have pagesize, pageindex, sort,sortdir, totalcount out and other search parameters

2. So you get only the particular page records from procedure with total_record_count as out

3. Map the page records (returned by store proc) to a model list

4. Send model list to web grid

5. Design asp.net mvc web grid with this result model list and use webgrid.bind method where you can total_record_count) to let the webgrid to render paging

Try DataTables JQuery control. This is free and has a option to fetch page by page using ajax. I used it earlier and worked well. Please see this blog for more information

jQuery
DataTables and ASP.NET
MVC
Integration – Part I

[RESOLVED]How to make my 3 drpdownlist as a required fields

Hi, i added in my register view 3 dropdownlist to selecte the date of birth ( DAY  , MONTH, YEAR)

 @Html.DropDownList("DateOfBirthDay", Enumerable.Range(1, 31).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }), "-- Select Day --")
                @Html.DropDownList("DateOfBirthMonth", Enumerable.Range(1, 12).Select(i => new SelectListItem { Value = i.ToString(), Text = System.Globalization.CultureInfo.InvariantCulture.DateTimeFormat.GetMonthName(i) }), "-- Select Month --")
                @Html.DropDownList("DateOfBirthYear", Enumerable.Range(1900, 109).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }), "-- Select Year --")
                

and i add them in my controller

// POST: /Account/Register
        [HttpPost]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public async Task<ActionResult> Register(string DateOfBirthDay , string DatehOfBirthMonth, string DateOfBirthYear, RegisterViewModel model)

but i would love to make them as a required files and if they are not, to return the form..

how to do?

Easiest way to validate a dropdown list is to check if the element contains a non-null value:

change button-type from submit to button

@using (Html.BeginForm())
{
  ... form elements here ...

  <input id="submitBtn" type="button" value="Submit" />
}

Then handle the on-click event to check if valid, then submit if validation passes

<script>
  $("#submitBtn").on("click", function () {
    var canSubmit = true;
    if ($("#DateOfBirthDay").val() == "") {
      canSubmit = false;
      alert = "Please select a day";
    }

    if ($("#DateOfBirthMonth").val() == "") {
      canSubmit = false;
      alert("Please select a month";
    }

    if ($("#DateOfBirthYear").val() == "") {
      canSubmit = false;
      alert("Please select a year";
    }

    if (canSubmit) {
      $("form").submit();
    }
  });
</script>

Alternatively, if these are model properties (DateOfBirthDay, DateOfBirthMonth, DateOfBirthYear), then you could give each a "[Required]" annotation in the model, and use a DropDownFor helper with a ValidationMessageFor helper message:

@Html.DropDownListFor(model => model.DateOfBirthDay, ...)
@Html.ValidationMessageFor(model => model.DateOfBirthDay)

using this method, it basically takes care of itself.

Not directly related to your question, but have you considered using a DatePicker. It provides better user experience and also solves your issues. You can use a JQuery UI DatePicker or some other DatePicker

Demo of JQueryUI DatePicker http://jqueryui.com/datepicker/

Integrating this in MVC

ASP.NET MVC 3: Integrating with the jQuery UI date picker and adding a jQuery
validate date range validator

[RESOLVED]Create new Id for each image link on the Image-List page and access them in jquery function in _Layout page

I am trying to open an image in a new window, from a page with list of images.

    @if (Model.Image != null)
            {
                <a id="ImgLink" data-assigned-id="@Model.ProjectID"><img class="img-thumbnail" style=" width:180px; height:180px;" src='@Url.Action("GetImage", "Project", new { Model.ProjectID })' /></a>

            }

trying to open a new window using jquery in Layout page

<script type="text/javascript">
      $(document).ready(function () {
          
          $('#ImgLink').on('click', function () {
              var id = $(this).data('assigned-id');
        window.open('/Project/ImagePartial?projectId='+id, '_blank', 'left=100,top=100,width=400,height=300,toolbar=1,resizable=0');
    });
    });</script>

The problem is the List page loops through each image project and its creating multiple Images with same Id -" ImgLink". So my very first image works as desired but none after that. How can I assign different ids to each
image on the List page and then access them in jquery?

Thanks,

Rose

a id='@string.Format("ImgLink{0}",Model.ProjectID)' data-...

[RESOLVED]How comes i cant get my 3 dropdownlist value?

Hi, i am trying to put 3 dropdownlist DAY , MONTH, YEAR in  stead of a single field : DateOfBirth

I modify my register view page  Account/Register.cshtml  like this :

        <div class="form-group">
            @Html.LabelFor(m => m.DateOfBirth, new { @class = "col-md-4 control-label" })
            <div class="col-md-8">
                @Html.DropDownList("DateOfBirthDay", Enumerable.Range(1, 31).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }), "-- Select Day --")
                @Html.DropDownList("DateOfBirthMonth", Enumerable.Range(1, 12).Select(i => new SelectListItem { Value = i.ToString(), Text = System.Globalization.CultureInfo.InvariantCulture.DateTimeFormat.GetMonthName(i) }), "-- Select Month --")
                @Html.DropDownList("DateOfBirthYear", Enumerable.Range(1900, 109).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }), "-- Select Year --")
                @Html.ValidationMessageFor(m => m.DateOfBirth)
            </div>
        </div>

I updated my controller with the following :

 //
        // POST: /Account/Register
        [HttpPost]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public async Task<ActionResult> Register([Bind(Include = "DateOfBirthDay,DateOfBirthMonth,DateOfBirthYear")] RegisterViewModel model)

this is my  RegisterViewModel : (AccountViewModels.cs)

 public class RegisterViewModel
    {
        [Required(ErrorMessageResourceName = "Required", ErrorMessageResourceType = typeof(ViewRes.ValidationStrings))]
        [DataType(DataType.EmailAddress)]
        [RegularExpression(@"^([a-zA-Z0-9_-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([a-zA-Z0-9-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$", ErrorMessageResourceName = "Invalid", ErrorMessageResourceType = typeof(ViewRes.ValidationStrings))]
        [Display(Name = "UserName", ResourceType = typeof(ViewRes.Names))]
        public string UserName { get; set; }

        [Required(ErrorMessageResourceName = "Required", ErrorMessageResourceType = typeof(ViewRes.ValidationStrings))]
        [StringLength(100, ErrorMessageResourceName = "PasswordMinLength", ErrorMessageResourceType = typeof(ViewRes.ValidationStrings), MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "Password", ResourceType = typeof(ViewRes.Names))]
        public string Password { get; set; }

        [DataType(DataType.Password)]
        [Display(Name = "ConfirmPassword", ResourceType = typeof(ViewRes.Names))]
        [Compare("Password", ErrorMessageResourceName = "PasswordMustMatch", ErrorMessageResourceType = typeof(ViewRes.ValidationStrings))]
        public string ConfirmPassword { get; set; }

        // New Fields added to extend Application User class:
        [Required(ErrorMessageResourceName = "Required", ErrorMessageResourceType = typeof(ViewRes.ValidationStrings))]
        [Display(Name = "FirstName", ResourceType = typeof(ViewRes.Names))]
        public string FirstName { get; set; }

        [Required(ErrorMessageResourceName = "Required", ErrorMessageResourceType = typeof(ViewRes.ValidationStrings))]
        [Display(Name = "LastName", ResourceType = typeof(ViewRes.Names))]
        public string LastName { get; set; }

        [Required(ErrorMessageResourceName = "Required", ErrorMessageResourceType = typeof(ViewRes.ValidationStrings))]
        [Display(Name = "Sex", ResourceType = typeof(ViewRes.Names))]
        public string Sex { get; set; }

        [Required(ErrorMessageResourceName = "Required", ErrorMessageResourceType = typeof(ViewRes.ValidationStrings))]
        [Display(Name = "DateofBirth", ResourceType = typeof(ViewRes.Names))]
        [DataType(DataType.DateTime)]
        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
        public DateTime DateOfBirth { get; set; }

        public DateTime DateOfRegistration { get; set; }

        public bool UserNewsletter { get; set; }

        public string DefaultLanguage { get; set; }

        public string RealUserLanguage { get; set; }
        
        // Return a pre-poulated instance of AppliationUser:
        public ApplicationUser GetUser()
        {
            //Generate random code
            string randomcode = "";
            Random random = new Random();
            int length = 8;
            for (int i = 0; i < length; i++)
            {
                if (random.Next(0, 3) == 0)                     //if random.Next() == 0 then we generate a random character
                {
                    randomcode += ((char)random.Next(65, 91)).ToString();
                }
                else                                            //if random.Next() == 0 then we generate a random digit
                {
                    randomcode += random.Next(0, 9);
                }
            }



            //Get the language of the user
            string defaultlanguage = "en";
            string langName = "en";
            if (HttpContext.Current.Request.UserLanguages != null && HttpContext.Current.Request.UserLanguages.Length != 0)
            {

                defaultlanguage = HttpContext.Current.Request.UserLanguages[0].Substring(0, 2);

                if (defaultlanguage == "it")
                {
                    langName = "it";
                }
                if (defaultlanguage == "fr")
                {
                    langName = "fr";
                }
                if (defaultlanguage == "es")
                {
                    langName = "es";
                }

            }



            var user = new ApplicationUser()
            {

                UserName = this.UserName,

                FirstName = this.FirstName,

                LastName = this.LastName,

                Sex = this.Sex,

                DateOfBirth = this.DateOfBirth,

                DateOfRegistration = DateTime.Now,

                PasswordNotHashed = this.ConfirmPassword,

                CodeVerification = randomcode,

                UserActive = true,

                UserNewsletter = this.UserNewsletter,

                DefaultLanguage = langName,

                RealUserLanguage = defaultlanguage,

            };
            return user;
        }
    }

But when i try to get the 3 dropdownlist data in my controller it looks like they don’t exist… why?

example

 DateOfBirthYear = model.DateOfBirthYear;

Thanks

Hi,

Either you can go for Strongly Typed DropdownListFor or if you want to stick for the same code then you can pass the parameters in your post method like below -

YourPostMethod(string DateOfBirthDay , string DatehOfBirthMonth, string DateOfBirthYear)

{



}

Hi, like this i can see them, but how can i make them as a required fields?

because, when i register,  if i don’t choose any day or month or year i get error :

Erreur du serveur dans l'application '/'.

La chaîne n'a pas été reconnue en tant que DateTime valide.

Description : Une exception non gérée s'est produite au moment de l'exécution de la requête Web actuelle. Contrôlez la trace de la pile pour plus d'informations sur l'erreur et son origine dans le code. 

Détails de l'exception: System.FormatException: La chaîne n'a pas été reconnue en tant que DateTime valide.

Erreur source: 


Ligne 820 :                {
Ligne 821 :                    // do for invalid date
Ligne 822 :                    DateTime FullDateOfBirthLastFormatDate = Convert.ToDateTime(FullDateOfBirthLast);
Ligne 823 :                    user.DateOfBirth = FullDateOfBirthLastFormatDate;
Ligne 824 :

you should add the three down drown fields to the view model and make them required.

[RESOLVED]Strange behavior from Create View

I have an ASP.Net MVC 4 web app.  I  have this one particular controller.  The index view for this controller has three partial views on it.  The first partial view always loads when the view is called.  It uses a renderAction html helper.  The other two
are called as a result of ajax function calls within the create view.

The index view has a JQuery datatables library included which is built using JqueryUI.  There are no JQueryUI components on the Create View.

As the result of a button click, the Create view calls a function which first calls one ajax function to save the data to the database, then another ajax call to the action used by the renderAction to build the first partial view.  This function was devised
months ago and has been running without an issue.   Then suddenly today, the button click would save the data, then open the index view.  This was not the expected behavior.  When I stepped through the code line by line I found that the pratial view was in
fact bveing loaded into the proper location on the create view.  And in fact when doing so the proper window opened in IE.  But then a bunch of additional code in modernizer, Jquery-1.8.2 and jQuery-UI-1.8.24 started running and when it completed it opened
on the Index view.  I have no idea how this happened.  See the code below

First I called an ajax like so

    $(function () {
        var PopulatePRs = function () {
            ////debugger
            var sURL = '@Url.Action("CreatePurchaseRequest", "AJAXFunctions")';
            var goURLid = 0;
            var form = $("#PRCreate");
            var bError = false;
            var sResultMessage = '';

            //alert(options.url);
            $.ajax({
                url: sURL,
                type: 'POST',
                data: form.serialize(),
                cache: false,
                async: false,
                dataType: 'json',
                //contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    debugger
                    if (data != null) {
                        $(data).each(function () {
                            goURLid = data;
                        });
                    }
                    else {
                        debugger
                        returnedInfo = 'An Error has occurred. Your new PR was not saved to the database.';
                        bError = true;
                        goURLid = 0;
                    }
                },
                error: function () {
                    debugger
                    returnedInfo = 'An Error has occurred. Your new PR was not saved to the database.';
                    bError = true;
                    goURLid = 0;
                }
            });

This works fine.   I have verified in the database that the ajax call was successful.  Then the following ajax function is called to call the action that rebuilds the partial view.

           debugger
            //if (!bError) {
            var sURLRepost = '@Url.Action("PurchaseRequestTable", "PR")' + '/' + goURLid;
            var options = {
                url: sURLRepost,
                type: "get",
                async: false
            };
            //alert(options.url);
            $.ajax(options).done(function (data) {
                debugger
                $("#PRtableView").replaceWith(data);
            });

            if (!bError) {
                sResultMessage = "The new Purchase Request has been saved to the database.nClick below to add CLINs and CDRLs.";
                $("#PRCreated").text(sResultMessage).toggle();
            }
            else {
                sResultMessage = returnedInfo;
                $("#PRCreated").text(sResultMessage).toggle();
            }

The action is properly called the ajax call which I was able to verify by putting a breakpoint in the action and stepping through it and I was able to hover over the "data" variable and verify that the proper html was being returned to replace $("#PRtableView"). 
Finally I was able to verify the sResultMessage was replacing the text of $("#PRCreated").  Then I actually saw the window open looking as it is supposed to.

Then the part of modernizer that starts with the below code ran:

window.Modernizr = (function( window, document, undefined ) {


    var version = '2.6.2',


    Modernizr = {},

    /*>>cssclasses*/

    // option for enabling the HTML classes to be added

    enableClasses = true,

    /*>>cssclasses*/

Then in JQuery-1.8.2 the function that starts with this:

(function( window, undefined ) {
var
	// A central reference to the root jQuery(document)
	rootjQuery,

	// The deferred used on DOM ready
	readyList,

	// Use the correct document accordingly with window argument (sandbox)
	document = window.document,
	location = window.location,
	navigator = window.navigator,

	// Map over jQuery in case of overwrite
	_jQuery = window.jQuery,

Then this function

(function( $, undefined ) {


// prevent duplicate loading

// this is only a problem because we proxy existing functions

// and we don't want to double proxy them

$.ui = $.ui || {};

if ( $.ui.version ) {

	return;

}

Then this function

function( $, undefined ) {



// jQuery 1.4+

if ( $.cleanData ) {

	var _cleanData = $.cleanData;

	$.cleanData = function( elems ) {

		for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {

			try {

				$( elem ).triggerHandler( "remove" );

			// http://bugs.jquery.com/ticket/8235

			} catch( e ) {}

		}

		_cleanData( elems );

	};

} else {

	var _remove = $.fn.remove;

	$.fn.remove = function( selector, keepData ) {

		return this.each(function() {

			if ( !keepData ) {

				if ( !selector || $.filter( selector, [ this ] ).length ) {

					$( "*", this ).add( [ this ] ).each(function() {

						try {

							$( this ).triggerHandler( "remove" );

						// http://bugs.jquery.com/ticket/8235

						} catch( e ) {}

					});

				}

			}

			return _remove.call( $(this), selector, keepData );

		});

	};

}

Then in JQuery-ui-1.8.24

(function( $, undefined ) {


var mouseHandled = false;

$( document ).mouseup( function( e ) {

	mouseHandled = false;

});

then

function( $, undefined ) {


$.widget("ui.draggable", $.ui.mouse, {

	widgetEventPrefix: "drag",
...

then

(function( $, undefined ) {


$.widget("ui.droppable", {

	widgetEventPrefix: "drop",

	options: {

		accept: '*',
....

and a few more $.widget methods.

And when all of these finished, then the index view was opened.

Like I said it did not do that from a couple of months ago up to a couple of days ago.  It did not do this when I first ran it this morning.  It just started to do this, this morning at a demonstration for the customer, and has been doing this ever since.

I am baffeled.  If anyone can point me in the right direction I would be most grateful.

Found it.  This page
http://forums.asp.net/p/2010964/5786750.aspx?p=True&t=635478678680887055&pagenum=1
 I was advised to put href = "" in my links to make the syle of a link appear on the page.  I had forgotten that I read somewhere that when no index is passed to the url,
then the user is routed to the index method of the controller.  That is what happened here after I made the change referenced above. 

So I will have to hard code a style just for these elements in the style sheet.

Hi joeller,

If the href attribute is not present, the <a> tag is not a hyperlink. In HTML5, if the <a> tag has no href attribute, it is a placeholder for a hyperlink.

# HTML <a> href Attribute

http://www.w3schools.com/tags/att_a_href.asp

Best Regards

Starain Chen

[RESOLVED]How to get started with ASP.NET MVC ?

I’ve learned ASP.NET 2-3 years ago and I’d made some projects on ASP.NET. Now It feels like I can improve them little bit. As I’ve some 15 days free, So I was thinking to learn something new and use it in my old projects.

Actually there are some areas in my projects where I’ve to design new tools which is not possible with ASP.NET alone. For example I’m having "Virtual Classroom Project" and there is a tool called "White Board" which allow Professor to explain the things
to students. I was going to start learning Silverlight then some of my friends suggested me of ASP.NET MVC.  I’m new to ASP.NET MVC and don’t know anything about it.

How it is different from ASP.NET ?
What features does it offers ?
Whats the future of it ?
How much ASP.NET MVC coding is different from ASP.NET ?
How much time will it take to learn ASP.NET MVC ?

I’d suggest to spend 1 hour of 15 days to google all 5 questions.

Spend an hour or two and walk through this beginner’s tutorial:

http://www.asp.net/mvc/tutorials/mvc-music-store/mvc-music-store-part-1

this tutorial covers most of the basics for MVC.  Please note that this tutorial is slightly dated — I believe it’s more for MVC 3 than 5, however the same principles still apply.

MVC Resources

The Getting Started MVC area on this site is a great place to start as well if you want to start learning MVC outside of a book environment. It will cover just about everything that you would need to build complete applications
and it is written by experts that apply best practices to help you build good habits for future applications.

One of the most well regarded and complete MVC-based tutorials would be the ASP.NET MVC Music Store tutorial, which you can find under the MVC section of this site. However, any
of the tutorials on this site
 should be great stepping stones to get you building your own complete MVC applications in no time.

You can find a few other resources listing off countless other MVC-based tutorials below: 

or the following more architecturally based examples :

I would definately recommend the MVC Music Store Tutorial as well as the other ones available on this site (ASP.NET) and if you are still looking for more information after that, check out some of the other links I provided. If you are still looking
for some additional tutorials or other MVC based projects, you might want to dig around on open-source sites like github and Codeplex and search for a bit more complex sites and projects.

Regarding Your Questions

22990atinesh

How it is different from ASP.NET ?

Technically, ASP.NET is still based on the same framework as Web Forms (which I am assuming that you are referring to in this context). MVC just provides a different pattern and approach to developing your applications. It is patterned after the
web and thus is stateless (so you don’t have a ViewState or any Controls). Due to it’s nature, it lends itself well to separating your concerns (all of your Presentation-related code is within the Views, your business logic will be within your
models and your Controllers will handle your data access
).

22990atinesh

What features does it offers ?

It doesn’t necessarily "offer" any newer features. Some might argue that it can be tested more easily than Web Forms (if you actually are one of the people out there writing tests consistently). I personally find it to be much simpler than Web Forms in a
very "bare-bones" sense.

22990atinesh

Whats the future of it ?

Bright. MVC has really taken off since it’s release and is continuing to gain more and more steam for developing Microsoft Web Applications. Web Forms is still completely relevant and will continue to play a major role, but MVC is certainly catching up.

It’s worth learning.

22990atinesh

How much ASP.NET MVC coding is different from ASP.NET ?

As I mentioned earlier, there are quite a few learning curves associated with it. The lack of "Controls" can be tough for those migrating from Web Forms as can the lack of a state. Since controls don’t exist, it requires developers to be much more comfortable
with using pure HTML and Javascript to accomplish many of the things that their controls did previously. 

22990atinesh

How much time will it take to learn ASP.NET MVC ?

This is something that depends entirely on you and how quickly you can understand the different components of an MVC application and how they work together. The tutorials mentioned earlier should help with this.

22990atinesh

there is a tool called "White Board" which allow Professor to explain the things to students

SignalR is a good fit for your whiteboard application. Please take look at these posts

Online
Whiteboard using HTML5 and
SignalR

A SignalR Whiteboard

22990atinesh

As I’ve some 15 days free, So I was thinking to learn something new and use it in my old projects.

I recommend learning AngularJS. It is getting more traction now-a-days. You can use MVC/WebAPI with AngularJS

Rion Williams

MVC Resources

The Getting Started MVC area on this site is a great place to start as well if you want to start learning MVC outside of a book environment. It will cover just about everything that you would need to build complete applications
and it is written by experts that apply best practices to help you build good habits for future applications.

One of the most well regarded and complete MVC-based tutorials would be the ASP.NET MVC Music Store tutorial, which you can find under the MVC section of this site. However, any
of the tutorials on this site
 should be great stepping stones to get you building your own complete MVC applications in no time.

This is something that depends entirely on you and how quickly you can understand the different components of an MVC application and how they work together. The tutorials mentioned earlier should help with this.

Thanx for help Now I can start learning ASP.NET MVC.

How is ASP.NET Web Pages, Is it better than ASP.NET MVC. Is it possible create tools that I asked for with ASP.NET Web pages. 

ASP.NET Web pages are completely different than MVC.If you are strong with HTML concepts you may be able to learn it quickly.

22990atinesh

How is ASP.NET Web Pages, Is it better than ASP.NET MVC. Is it possible create tools that I asked for with ASP.NET Web pages. 

Neither are necessarily better than the others, they are different patterns / technologies that both can be used to create Web Applications. Web Pages can be thought of as a more entry-level technology (not to say that it cannot be used to build complex
Web Applications
) whereas MVC encompasses a much larger set of libraries and in general more complex (which might be overkill for something as simple as a Web Site).

Both can create Web Applications, which is ultimately what your goal is, so either might be worth exploring as an option.

Rion Williams

22990atinesh

How is ASP.NET Web Pages, Is it better than ASP.NET MVC. Is it possible create tools that I asked for with ASP.NET Web pages. 

Neither are necessarily better than the others, they are different patterns / technologies that both can be used to create Web Applications. Web Pages can be thought of as a more entry-level technology (not to say that it cannot be used to build complex
Web Applications
) whereas MVC encompasses a much larger set of libraries and in general more complex (which might be overkill for something as simple as a Web Site).

Both can create Web Applications, which is ultimately what your goal is, so either might be worth exploring as an option.

I’ve tried ASP.NET MVC, It’s a totally new concept. I’ll learn it in the future. For now I just want to create a "White Board tool" which should be capable of displaying PPT, PDF, have Simple Drawing tool and a chat box. Can I do it with the help of HTML
5 + Jquery + CSS

22990atinesh

I’ve tried ASP.NET MVC, It’s a totally new concept. I’ll learn it in the future. For now I just want to create a "White Board tool" which should be capable of displaying PPT, PDF, have Simple Drawing tool and a chat box. Can I do it with the help of HTML 5
+ Jquery + CSS

You’ll likely need to use some kind of server-side code in order to properly retrieve your various types of files (unless they are explicitly stored in the same directory as your project and you would be accessing them through links). Additionally,
most browsers are not going to be able to "display" files like PowerPoint natively, you’ll need to look into a library as a way to present these within the browser (although there are other
ways to embed a PowerPoint presentation within your web application
).

Finally, a drawing tool shouldn’t be too out of reach as it’s very commonly implemented using the HTML <canvas> element along with a bit of Javascript / jQuery. If you search around for it, you shouldn’t have too much trouble finding a simple HTML5 Drawing
implementation. There are quite a few "it depends" answers related to a project like this and I am sure that you should be able to accomplish something like it using either a pure HTML5 / Javascript implementation or one that leverages ASP.NET (either
Web Pages or MVC
).

zing!

22990atinesh

Can I do it with the help of HTML 5 + Jquery + CSS

Have you looked at my earlier links?

Online
Whiteboard using HTML5 and
SignalR

A SignalR Whiteboard

Let’s see videos to understand about MVC .NET. You can understand some things

http://youtu.be/lG49gPy-hG0

http://youtu.be/ZKYlK4RFa1I

http://youtu.be/-ZdgU8Hngxw

Hi,

Please use below link to know about basic MVC history, basic, business section are same what we had been used in ASP.Net. 

http://www.asp.net/mvc

http://mvc4beginner.com/Tutorial/

http://msdn.microsoft.com/en-us/vs2010trainingcourse_aspnetmvc3razor.aspx

http://20fingers2brains.blogspot.com/2014/01/introduction-to-aspnet-mvc-3.html

http://www.microsoftvirtualacademy.com/training-courses/introduction-to-asp-net-mvc

Please don’t rush to learn short time, please work out what you learn day by day.

Thanks,

Jai.

Rion Williams

22990atinesh

I’ve tried ASP.NET MVC, It’s a totally new concept. I’ll learn it in the future. For now I just want to create a "White Board tool" which should be capable of displaying PPT, PDF, have Simple Drawing tool and a chat box. Can I do it with the help of HTML 5
+ Jquery + CSS

You’ll likely need to use some kind of server-side code in order to properly retrieve your various types of files (unless they are explicitly stored in the same directory as your project and you would be accessing them through links). Additionally,
most browsers are not going to be able to "display" files like PowerPoint natively, you’ll need to look into a library as a way to present these within the browser (although there are other
ways to embed a PowerPoint presentation within your web application
).

Finally, a drawing tool shouldn’t be too out of reach as it’s very commonly implemented using the HTML <canvas> element along with a bit of Javascript / jQuery. If you search around for it, you shouldn’t have too much trouble finding a simple HTML5 Drawing
implementation. There are quite a few "it depends" answers related to a project like this and I am sure that you should be able to accomplish something like it using either a pure HTML5 / Javascript implementation or one that leverages ASP.NET (either
Web Pages or MVC
).

Hello Rion William,
I’ve read SignalR articles from official ASP.NET website. Its a very cool and easy concept. A simple "Chat box" App requires only few lines of code (hardly 7-8 lines of code after adding the SignalR library) and its quite self explanatory. And Ya HTML 5 canavas
is also easy way to create white board. I can combine these two to make a simple White board tool, But I’m trying to build a more advanced white board tool with more flexibility and more featues. Please see this post

http://forums.asp.net/t/2012233.aspx?What+you+can+and+can+not+do+with+ASP+NET+SignalR+

Pro ASP.NET MVC 5

[RESOLVED]How to update two different target ids when using Ajax.BeginForm?

How can you replace two different targetids when using Ajax.BeginForm? I have the following form but when there are validation errors eg when user submits form without adding any comments I can only replace targetid "Comments".

@Html.Partial("_CreateComment", Model)

<div id="Comments">
    @* Get list of all comments *@
    @Html.Action("Comments", "Blog")
</div>
// _CreateComment partial view
<div id="CommentForm">

	@Html.ValidationMessageFor(model => model.Comment)

	@using (Ajax.BeginForm("AddComment", "Blog", new AjaxOptions
	{
            HttpMethod = "POST",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "Comments"
         
	} ))
	{
             @Html.ValidationSummary(true)

             @Html.HiddenFor(model => model.BlogID)

  
	    <div>
		Add Comment: @Html.TextAreaFor(model => model.Comment, 1, 100, new { @Class = "commentbox" })
            </div>

             <div >
                <input type="submit" id="button" value="Add" /> 
            </div>
        }
</div>
// AddComment controller action

[HttpPost]
public ActionResult AddComment(Comment comment)
{

	Blog blog = _repository.GetBlogDetails(comment.BlogID);

        if (ModelState.IsValid)
	{

	   // Add Comment to DB..
           _repository.AddBlogComment(Comment);

     
           // Redirect to action and retrieve all comments 
           return RedirectToAction("Comments", new { id = blog.BlogID });

        }

        if (Request.IsAjaxRequest()) //was this request an AJAX request?
        {
                return PartialView("_CreateComment", blog); 
        }
        else
        {
                return View(blog);
        }
}

Any ideas how to fix. Basically i need to update two targetids – one for when comment is successfully added targetid "Comments" needs to replaced and when there are validation errors targetid "CommentForm" needs to be replaced.

If you want to make the Comments field required, just add the annotation to your Comment class

[Required]
public string Comment { get; set; }

And then add the jquery unobtrusive validation script to the scripts-section of your View:

@section scripts {
  @Scripts.Render("~/bundles/jqueryval")
}

This code will validate your form upon submission.

The comment class already has the required annotation and the validation is working. However when there are error what I want to do is simply redsiplay the form with the error message. What i need is some way to have two targetids so that the correct region
is being replaced.

Can you move the "Comments" div inside the partial control (that is inside the Form). If you do this, then on Ajax.BeginForm you can reload the "CommentForm" based on the output of the post.

On the server if the Model is not valid, you can use ModelState.Add to add the error message and hide the "comments" div. if the model is valid, you can show the "Comments" div

I have moved "Comments" div inside the partial control as follows:

<div id="Comments">

   <div id="CommentForm">

	@Html.ValidationMessageFor(model => model.Comment)

	@using (Ajax.BeginForm("AddComment", "Blog", new AjaxOptions
	{
            HttpMethod = "POST",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "Comments"
         
	} ))
	{
             @Html.ValidationSummary(true)

             @Html.HiddenFor(model => model.BlogID)

  
	    <div>
		Add Comment: @Html.TextAreaFor(model => model.Comment, 1, 100, new { @Class = "commentbox" })
            </div>

             <div >
                <input type="submit" id="button" value="Add" /> 
            </div>
        }
   </div>

   <div >
    	    @* Get list of all comments *@
    	    @Html.Action("Comments", "Blog")
   </div>

</div>

The form re-displays correctly but no validation errors are showing? One thing I have noticed is when I comment out the Html.Action() as below then the validation errors seem to work but then obviously none of my existing comments are displayed.

 @* Html.Action("Comments", "Blog") *@

The above html.action displays another partial view which has a for loop to display all the comments as follows:

@model IEnumerable<DB.Models.BlogComment>

@foreach (var item in Model)
{

   //...some stuff
}

any idea why its behaving like this.

GStar99

Html.Action("Comments", "OneToOne")

Where have you included this partial view? Is it inside the comments div?

sorry the partial view should be Html.Action("Comments", "Blog"). I have updated the original reply. It is inside the "comments" div as show above.

GStar99

How can you replace two different targetids when using Ajax.BeginForm?

handle onsuccess venet of ajax form.

in handler, update the two target divs. onsuccess handler has the parameter with output

Onsuccess will always be true since the controller action that is called by the ajax.beginform always works even when there are model validation errors – see the above controller code in my earlier post.

If I’ve miss-understood your answer please provide a short example?

you can have only one target id for a ajax form, what it does is, post the request, get back the response, put the html response in the target element. If i understood correctly you want to give the real time comments, even if the current request has errors.
try the following

1) Remove client side validation, remove both jquery unobtrusive and jquery validate. Have only server side validation.

2) In server code refresh the list of comments irrespective of validation hence even if there is error your comments section is refreshed. Add the comments to database only when it is not empty, so that you dont get empty texts

Blog blog = _repository.GetBlogDetails(comment.BlogID);

        if (ModelState.IsValid)
{

   // Add Comment to DB.. _repository.AddBlogComment(Comment);     
          
// Redirect to action and retrieve all comments

           //
return RedirectToAction("Comments",
new { id
= blog.BlogID
});

        }

// refresh the page even though the current user left the comment column empty

return RedirectToAction("Comments",
new { id
= blog.BlogID
});
       
if (Request.IsAjaxRequest())
//was this request an AJAX request?
       
{
               
return PartialView("_CreateComment", blog);

       
}
       
else
       
{
               
return View(blog);
       
}

[RESOLVED]How to use ajax script to prevent from postback view when saving records into the database?

I have a controller which I used to save records into the database. I noticed that everytime the I save a record the entire view will flicker or postback. So I researched and I realized that I need to use a PartialViewand
an 
AJAX script to avoid from view postback. So far, what I’ve got are the details below but somehow I encountered trouble using them. Using the details below, when you post a comment, the div element named"ajaxcom" in
the view where my initial comments are displayed will be gone and the comments were not even saved anymore into the database but instead I want to display my partial view into the ajaxcom div element after when you click the 
Post Comments button
so that the entire view will not postback and just automatically displays the new comments within the ajaxcom div element. So I suspected there must have been something wrong with my ajax script below. How do I fix this? and what am I been missing?…Thanks

AJAX Script:

$(function () {

            $("#addcomment").on("submit", function (e) {
               e.preventDefault();

                $.ajax({
                  url: this.action,

                  type: this.method,

                 data: $(this).serialize(),

                    success: function (data) {
                     // ajaxcom is the id of the div element where I want to display my partialview 
                        $("#ajaxcom").html(data);

                    }
                });
            });
        });

Controller:

[HttpPost]
    public  ActionResult AjaxComments(CommentModel com)
    {

                if (ModelState.IsValid)
                {
                    comrepository.InsertComment(com); //this is to insert the records
                }
                  var vModel = new CreateViewModel();

                vModel.Comments = comrepository.GetAllComments().ToList();

                // AddComments is my partialview
                return PartialView("AddComments", vModel);

    }

View:

@using (Html.BeginForm("AjaxComments", "Profile", FormMethod.Post, new { id = "addcomment" }))
 {
    <fieldset>
        <legend>CommentModel</legend>

        <div class="editor-label">
           <label for="name">Name</label>
        </div>
        <div class="editor-field">

       <input type="text" id="name" name="name" />
       <span class="field-validation-valid" data-valmsg-for="name" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="comment">Post your Comment here:</label>
        </div>
      <div class="editor-field" style="margin-bottom:0px">
      <textarea id="comment" name="comment" style="width:500px;height:100px;resize:none"  aria-multiline="True"></textarea>
      <span class="field-validation-valid" data-valmsg-for="comment" data-valmsg-replace="true"></span>
        </div>

        <p>
             <input type="submit" value="Post Comments" name="butname" />   

        </p>

        <br />

    </fieldset>

 }
    <h2>Comments</h2>
     <br />

  <div id="ajaxcom"> <!-- Div element to be invoked by ajax script  -->

  <table id="mytable">  

  @foreach (var item in Model.Comments )
      {
    <tr >
        <td class="tdstyle" >

  <div style="font-weight:bold;">  @Html.DisplayFor(modelItem => item.name) </div> 

   <p class="comment more" style ="white-space: pre-line; margin-top:0px;margin-bottom:0px; border-radius: 4px 4px 4px 4px; max-width :500px; min-height :5px;  display :block; background-color: #CCCCFF">  @Html.DisplayFor(modelItem => item.comment) </p>
  <p style="margin-top:2px;margin-bottom:0px"> <input type="button" id="like" name="like" value="Like" style="color:blue;border:0px;background-color:inherit;cursor:pointer" /> <input type="button" class ="Reply" name="Reply" value="Replie(s)"  style="margin-bottom:0px;color:blue;border:0px;background-color:inherit;cursor:pointer" /></p>


        </td>       
    </tr>

    }

</table>
 </div>

Hi timmack,

Please add a new partial view to display the comment details (e.g. CommentDetail.cshtml).

<table id="mytable">  

  @foreach (var item in Model.Comments )
      {
    <tr >
        <td class="tdstyle" >

  <div style="font-weight:bold;">  @Html.DisplayFor(modelItem => item.name) </div> 

   <p class="comment more" style ="white-space: pre-line; margin-top:0px;margin-bottom:0px; border-radius: 4px 4px 4px 4px; max-width :500px; min-height :5px;  display :block; background-color: #CCCCFF">  @Html.DisplayFor(modelItem => item.comment) </p>
  <p style="margin-top:2px;margin-bottom:0px"> <input type="button" id="like" name="like" value="Like" style="color:blue;border:0px;background-color:inherit;cursor:pointer" /> <input type="button" class ="Reply" name="Reply" value="Replie(s)"  style="margin-bottom:0px;color:blue;border:0px;background-color:inherit;cursor:pointer" /></p>


        </td>       
    </tr>

    }

</table>
[HttpPost]
    public  ActionResult AjaxComments(CommentModel com)
    {

                if (ModelState.IsValid)
                {
                    comrepository.InsertComment(com); //this is to insert the records
                }
                  var vModel = new CreateViewModel();

                vModel.Comments = comrepository.GetAllComments().ToList();

                // AddComments is my partialview
                return PartialView("CommentDetail", vModel);

    }

Best Regards

Starain Chen

I would suggest you to use MVC ajax, instead of jquery ajax. You are using jquery ajax, which also works but there is some problem in the way you are calling i guess the url, and data are not correct.

Replace html forms with ajax forms and remove the javascript function. verify how it works.

@using (Html.BeginForm("AjaxComments", "Profile", FormMethod.Post, new { id = "addcomment" }))

@using (Ajax.BeginForm("AjaxComments", "Profile", new { id = "addcomment" }, new AjaxOptions { UpdateTargetId = "ajaxcom", HttpMethod = "POST", InsertionMode = InsertionMode.Replace }))