Programming and Learning from SD

Uncaught SyntaxError: Unexpected token u. file JavaScript Error in MVC

Aligned — Mon, 20 May 2013 18:45:38 GMT

Originally posted on: http://geekswithblogs.net/Aligned/archive/2013/05/20/uncaught-syntaxerror-unexpected-token-u.-file-javascript-error-in-mvc.aspx

I was getting a JavaScript error that pointed to line number 1 of my MVC page. I have a form on the page and expected the Unobtrusive Validation to work with the Data Annotations. It took me a while to realize the validation messages weren't showing. After I while I found that I was missing the @Html.ValidationMessageFor(m => m.Name). Adding that for each field fixed it.

My password reset with token example. I was missing line 12 and 17.

   1:  @using (Html.BeginForm("PasswordReset", "Home"))

   2:  {

   3:      @Html.AntiForgeryToken()

   4:      @Html.ValidationSummary()

5:

   6:      <fieldset>

   7:          <legend>@HomeViewResource.ChangePasswordFormTitle</legend>

   8:          <ol>

   9:              <li>

  10:                  @Html.LabelFor(m => m.PasswordResetModel.NewPassword)

  11:                  @Html.PasswordFor(m => m.PasswordResetModel.NewPassword)

  12:                  @Html.ValidationMessageFor(m => m.PasswordResetModel.NewPassword)

  13:              </li>

  14:              <li>

  15:                  @Html.LabelFor(m => m.PasswordResetModel.ConfirmPassword)

  16:                  @Html.PasswordFor(m => m.PasswordResetModel.ConfirmPassword)

  17:                  @Html.ValidationMessageFor(m => m.PasswordResetModel.ConfirmPassword)

  18:              </li>

  19:          </ol>

  20:          <input type="submit" class="btn btn-primary" value="@HomeViewResource.ChangePasswordButtonText" />

  21:      </fieldset>

22:

  23:      @Html.HiddenFor(m => m.PasswordResetToken)

  24:      @Html.HiddenFor(m => m.UserId)

  25:  }

Use the NotMapped Attribute with Entity Framework in Partial Classes

Aligned — Wed, 15 May 2013 21:32:32 GMT

Originally posted on: http://geekswithblogs.net/Aligned/archive/2013/05/15/use-the-notmapped-attribute-with-entity-framework-in-partial-classes.aspx

I wanted to add a property to send to my JavaScript class through WebApi, but didn’t want it in the database. I was getting an error telling me I had an invalid name on the EF 5 selection from the database. Adding the NotMapped attribute to the property did the trick. I get it on the JavaScript side as well. I found the answer (again) on StackOverflow.

Example:

public partial class ComponentAttribute
{
    [NotMapped]
    public bool IsModified { get; set; }
}

jQuery 1.9.1+ Ajax Post is Failing even though it has a 200 Status

Aligned — Wed, 08 May 2013 14:41:26 GMT

Originally posted on: http://geekswithblogs.net/Aligned/archive/2013/05/08/jquery-1.9.1-ajax-post-is-failing-even-though-itrsquos-a.aspx

I’m using my DataService and AjaxService for JavaScript and upgraded to jQuery 1.9.1. One of my post methods, which was working before, started hitting the deferred fail, instead of the deferred’s done, even though the status code was 200. This method is not returning any JSON to the caller. The 1.9 upgrade guide states “Prior to 1.9, an ajax call that expected a return data type of JSON or JSONP would consider a return value of an empty string to be a success case, but return a null to the success handler or promise. As of 1.9, an empty string returned for JSON data is considered to be malformed JSON (because it is); this will now throw an error. Use the error handler to catch such cases.”. This question on the forums lead me to the upgrade guide and “Identifier” says to return a 204 instead. I change my WebApi method to return a 204 and now it’s working again.

I now am using return this.Request.CreateResponse(HttpStatusCode.NoContent);

Here’s the method:

[System.Web.Mvc.HttpPost]
public HttpResponseMessage UpdateAlias(JObject jsonData)
{
    // http://www.asp.net/web-api/overview/web-api-routing-and-actions/exception-handling
    // http://www.west-wind.com/weblog/posts/2012/May/08/Passing-multiple-POST-parameters-to-Web-API-Controller-Methods
    int assetId = 0;
    int userId = 0;
    string alias = string.Empty;
    try
    {
        assetId = jsonData["AssetId"].Value<int>();
        userId = jsonData["UserId"].Value<int>();
        alias = jsonData["Alias"].Value<string>();
        if (assetId == 0)
        {
            throw new ArgumentException("Asset Id is required.");
        }

        if (userId == 0)
        {
            throw new ArgumentException("User Id is required.");
        }

        if (string.IsNullOrWhiteSpace(alias))
        {
            throw new ArgumentException("Alias is required and cannot be empty.");
        }
        
        // more code here…

        // notice the noContent
        return this.Request.CreateResponse(HttpStatusCode.NoContent);
    }
    catch (Exception ex)
    {
        this._logger.Warn(string.Format("Error in UpdateAlias assetId:{0}, userId:{1}, new alias: {2}", assetId, userId, alias), ex);
        throw new HttpResponseException(new HttpResponseMessage
                                        {
                                            StatusCode = HttpStatusCode.InternalServerError,
                                            Content = new StringContent("Error!")
                                        });
    }
}

Handling IE 9 & 10's and Chrome’s clear button with Knockout binding

Aligned — Tue, 07 May 2013 16:02:18 GMT

Originally posted on: http://geekswithblogs.net/Aligned/archive/2013/05/07/handling-ie-9-amp-10s-and-chromersquos-clear-button-with.aspx

Our tester found a bug with my search box. The search box filters a grid using observables. IE 9 and 10, and Crome adds in a x clear option, this wasn’t changing the observable, so the filter wasn’t getting cleared out.

(image from SO question)

<input id="searchTextBox" class="searchTextBox" type="text" maxlength="25"
       title="Search" placeholder="Search"
       data-bind="value: GridVm.FilterText,
       valueUpdate: 'afterkeydown',
       disable: GridVm.Data().length == 0" />

I posted my question and ended up answering my own question on StackOverflow and thought I would share it here as well.

My solution involves using the http://knockoutjs.com/documentation/event-binding.html and the input event.

<input type="search" id="input1"

  data-bind="value: textForBox,

    valueUpdate: 'afterkeydown',
    event: { input: cleared }" />

var vm = {
    textForBox: ko.observable(),
    cleared: function (data, event) {
        if (event.currentTarget.value === '') {
           this.textForBox('');
        }
    }
};
ko.applyBindings(vm);

See my jsFiddle showing the solution.

Hope it helps!