Differences in MVC Development

Question

This is kind of an odd question but I could use some direction

I been working on a project using MVC and everywhere I look at examples, that the examples I see are nothing like I am really doing.

All examples are using Razor syntax and using @model to pass models from the controller to the view. But I am doing something different than what I am seeing and am wondering if I am using MVC incorrectly.

Instead of using Razor and @model, I am using HTML and JQuery and javascript objects and getting returned data that way.

So I am confused, am I doing things the "right way" or am I doing it the "wrong way"?

EDIT: How I get Data

// Get ClientInfo
function GetClientInformation() {
    $.ajax({
        type: "GET",
        url: AddClientURLParam.AddGetClientInformationURL,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data, textStatus, jqXHR) {
            ClientDataToGet(data);
        }
    })
}
function ClientDataToGet(clientInfoData) {
    $("#txtCompanyName").val(clientInfoData.CompanyName);
    $("#txtAddress1").val(clientInfoData.Address);
    $("#txtAddress2").val(clientInfoData.Address2);
    $("#txtCity").val(clientInfoData.City);
    $("#txtState").val(clientInfoData.State);
    $("#txtZip").val(clientInfoData.ZipPostal);
    $("#txtEmail").val(clientInfoData.Email);
    $("#txtContact").val(clientInfoData.Contact);
    $("#txtPhone").val(clientInfoData.Phone);
    $("#txtWorkPhone").val(clientInfoData.WorkPhone);
    $("#txtMobile").val(clientInfoData.Mobile);
    $("#txtFax").val(clientInfoData.Fax);
    $("#txtOther").val(clientInfoData.OtherPhone);
}

Answer 1

JavaScript/JQuery has a different purpose than Razor. Razor generates pages on the server, and once it's received by the client, Razor is finished.

It's a little extra overhead to use JSON, and not the traditional way of doing a website, but it might be best in some cases. If you are just calling JSON once, then it would probably be better just to let Razor do the generating, and use JavaScript for things that need to change on the client side.

You can use a JSON string as the model so you don't have to hit the server the first time:

@model string
<!-- ... -->
<script>
var model = @Html.Raw(Model); // Raw JSON
</script>

Razor Example

In your changes above, you showed a JavaScript way of doing this. If you're doing lots of JavaScript, I could see the benefit of just doing all of your generating in the client (you might look at something like handlebars). However, in my opinion, the razor code is easier to read.

<form>
  <div>
    @Html.LabelFor(m => m.CompanyName)
    @Html.TextBoxFor(m => m.CompanyName)
  </div>
  <!-- etc -->
</form>

Where as you were already generating a label and a textbox in code elsewhere.

It can handle most input validation for you, both on the client and the server (in case the JavaScript doesn't work), so that's less code you have to create yourself:

public class MyModel {
  [Required, StringLength(50)]
  public string Title {get;set;}
}

I think it would be worth the time to learn how to develop multiple ways so that you can use the best solution for the project.

Answer 2

What's "the wrong way"?

The .cshtml files are a "seam". They combine elements of C# and HTML.

@model is a global variable somewhat similar to AngularJS $scope. The idea is that you'll use that model for each view and then validate its contents and perform server-side operations after it is manipulated by the client.

Depending on the application, you might not want to do that. It's perfectly plausible to use JavaScript XHR requests against the underlying ASP.NET API to get data returned. I'm reasonably certain that's what ASP.NET MVC is doing behind the scenes anyway. It seems like what you're saying is that you're just hand-rolling it.

Whether or not this is valid really depends on you. Is it painful? Is it testable? Do you feel confident in the code?

Depending on what you are trying to do it might be time to check out one of the client-side JavaScript MVC libraries (I mentioned one, there are others) and just use ASP.NET Web API to communicate with the server.

Hope that helps.

Answer 3

The key difference is that the razor syntax is used to generate page content on the server at load time (using Microsoft's MVC framework) whereas the AJAX pattern you are using makes web service calls after the page has hit the client.

Outside of the Microsoft eco-system, you'll see a lot more AJAX. Web purists are going to prefer AJAX over server-side rendering - especially when using client frameworks like AngularJS.

There are pro's and con's to each approach.

Client with AJAX

A purist sticks with just AJAX calls and dynamically loads pieces of the page. Using server rendering is expensive. You'll notice a considerable delay (sometimes measured in seconds) when rendering the page on the server.

With AJAX, the page can start rendering on the client while loading other data from the server. It's asynchronous and can run in parallel. This gives a better perceived performance. With server rendering, the page has to be fully rendered on the server prior to the user seeing any client-side rendering.

Server Rendering

The benefit of rendering on the server is that you can use the Razor view template code to generate a lot of your HTML that you would otherwise have to do on the client. You'll get the added benefit of Microsoft's API's and some of the fancy syntax for embedding logic into your HTML which might be useful if you aren't using a client framework like AngularJS.

Using server rendering does not completely eliminate the need to make AJAX calls and doesn't prevent post-backs.