0

Doing a basic web application. When using gridview there are number of restrictions with freezing columns, vertical scrolling etc. Even we blend the layout with html, still the gridview has issues aligning well and it's not responsive.

So I want to use html, css front end and asp.net (c#) for backend. Displaying the data from the data base is not magic using html. However for editing data, getting user input, saving into database (CRUD operations) is readily available with gridview's event triggers. e.g. refers to bound field and id respectively and accurately.

The problem I am facing, I am not sure how to go about capturing user edits, saving data events in html and pass the data into the database via asp code. Any suggestions please?

aspiring
  • 1,557
  • 2
  • 20
  • 43

1 Answers1

1

You do it the same way you'd do any other HTML application. You post new data to the server. You can either do it by posting back to the server or you can post to a separate service using AJAX. Typically with AJAX you'll talk to a REST server, and the standard one for ASP.NET is Web API.

A typical AJAX solution will use JavaScript to gather the data into an object. Then it will post to the server, often using a tool such as jQuery to make that call easier. You'll tell it what URL to post to. The Web API will listen at that URL, receive the posted object, then handle communicating with a data layer to make those changes.

First Name: <input type="text" id="FirstNameTB"><br />
Last Name: <input type="text" id="LastNameTB"><br />
<button type="button" onclick="submitBtnClicked();">Submit</button>

<script>
function submitBtnClicked(){
    var person = { FirstName: $("#FirstNameTB").val(), LastName: $("LastNameTB").val()};
    $.ajax({
     method: "POST",
     url: "api/person",
     data: person    
     }).success(function(){
        alert("Person submitted.");
    });
}
</script>

Web API:

public class PersonApiController : ApiController // https://msdn.microsoft.com/en-us/library/system.web.http.apicontroller%28v=vs.118%29.aspx
{
    public void Post(Person person)
    {
        DataLayer.Save(person);
    }
}
Community
  • 1
  • 1
mason
  • 31,774
  • 10
  • 77
  • 121
  • +1 for explaining. But this looks like a js for asp.net mvc. I am not using mvc model. Just plain old stuff to understand the concept. `url: "api/person",` I am not sure how to use that, will have to find out. I just want to send the object as a data table to asp.net side. – aspiring May 11 '15 at 05:35
  • @aspiring This approach works perfectly fine with Web Forms. MVC is not needed. JavasScript is still JavaScript. As for the URL that my example code is posting to, it's a Web API endpoint. Which I provided a link to in my answer. If you're uncomfortable using a Web API endpoint, you could replace it with a generic handler (.ashx). But you lose the automatic model binding feature (Web API will take the HTTP POST request and automatically try to convert the posted JSON to a C# Person instance) and the nice routing (the "/api/person" URL would become something like "/AddPerson.ashx""). – mason May 11 '15 at 12:27
  • @aspiring You can't send it as a data table. JavaScript doesn't know how to create a data table. And data tables are ugly. Pass around [POCO's](http://en.wikipedia.org/wiki/Plain_Old_CLR_Object) as view models, as I have done with the `person` instance in my example. – mason May 11 '15 at 12:28