title: HTML5 for .NET developers using Kendo UI ASP .NET MVC
body: <p>I have used kendo grid to show list of emails collected from the controller, then when user clicks on a grid row the email body is displayed in kendo editor, i want to edit the email on the editor and save the email body back to the database using web service. But to interact with c# code in the server side it is not that straight forward. We dont want to have too much Javascript code. Current code is like that</p>
  
  <p><em><strong></em>__<em>_</em>__</strong> index.aspx</p>
  
  <pre><code>&lt;%: Html.Kendo().Grid(Model.mailList)
          .Name("Grid")
                      .HtmlAttributes(new { style = "height:auto;font-size: medium;" })
          .Columns(columns =&gt;
          {
              columns.Bound(p =&gt; p.MailId).Width(200);
              columns.Bound(p =&gt; p.From.Value).Width(200).Title("Sender");
              columns.Bound(p =&gt; p.Subject).Width(200);
              //columns.command(commands =&gt;
              //{
              //    commands.destroy();
              //});
  
          }) 
          .Pageable()
          .Sortable()
          .Scrollable()
          .Filterable()
  
          .Events(events =&gt; events.Change("onChange")) 
  
          .DataSource(dataSource =&gt; dataSource
              .Ajax()
              .ServerOperation(false)
              //.Destroy(destroy =&gt; destroy.Action("Index","Home"))
              .Model(model =&gt;
              {
                  //The unique identifier (primary key) of the model is the ProductID property
                  model.Id(p =&gt; p.MailId);
  
                  // Declare a model field and optionally specify its default value (used when a new model instance is created)
                  model.Field(p =&gt; p.Subject).DefaultValue("N/A");
  
                  // Declare a model field and make it readonly
                  model.Field(p =&gt; p.Sender).Editable(false);
              })                              
  
              .PageSize(5)          
              )
              .Selectable()
  
  %&gt;
  
  function sendMailToController() {
         $.ajax({
              url: "/Home/SendMail/",
              data: {
                  emailID: mailID,
                  emailBody: mailBody
  
              },
              cache: false,
              type: "GET",
              timeout: 10000,
              dataType: "json",
              success: function (result) {
                  if (result.Success) { 
                     alert("Operation Completed");
                  } else {
                      alert("Operation Failed");
                  }
              }
          });
      }
  </code></pre>
  
  <p><em><strong></em>__<em>_</em>__</strong>_Controller code</p>
  
  <pre><code>public ActionResult Index()
          {
  
              MailModel mailModelobj = new MailModel();
              mailModelobj.GetMailList();
              return View(mailModelobj);
  
  
          }
  
  public JsonResult SendMail(Guid emailID, string emailBody)
          {
              MailModel mailModelObj = new MailModel();
              mailModelObj.body = emailBody;
              mailModelObj.mailID = emailID;
              var Result = mailModelObj.SendMail(mailModelObj);
  
              return Json(new { Success = true, Result }, JsonRequestBehavior.AllowGet);
          }
  </code></pre>
  
  <p>Problem is, it is not working for a long email body texts from editor. We dont like above way of communication.</p>
  
  <p>We want to be in C# domain not too much in Javascript.</p>
  
  <p>My questions are:</p>
  
  <ol>
  <li><p>What is the best practice to interact with server side from kendo ui controls (get the values from controller and set the values through the controller ?</p></li>
  <li><p>Can you please explain with some little example like a submit button to submit the email body back to the server.</p></li>
  <li><p>Is it possible to do Test Driven Development with kendo UI ? How or example will be very helpful.</p></li>
  </ol>
  
  <p>thanks in advance..</p>