Pass HTML Content from View to Controller using jQuery Ajax

-


This blog is going to explain how to send a large amount of text content or HTML content from the view to the controller using jQuery Ajax.

Ajax means Asynchronous JavaScript and XML. It helps you to load the server data without refreshing the browser. So you can refresh part of the web page without loading the entire page. jQuery Ajax performs asynchronous Ajax requests.

The following is a view code. Here I have included the Google jQuery CDN (If you want you can download the jQuery library and include the link). Also, I have added some text boxes and textarea to collect the input values.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table class="width-hundred-percent">
    <tr>
        <td> ID: </td>
        <td> <input id="idTextBox" type="text" style="width:100%" /> </td>
    </tr>
    <tr>
        <td>Subject</td>
        <td><input id="subjectTextBox" type="text" style="width:100%" /></td>
    </tr>
    <tr>
        <td valign="top">Content: </td>
        <td><textarea id="contentTextArea" style="margin: 0px;width: 500px;height: 300px;"></textarea>
        </td>
    </tr>
    <tr>
        <td colspan="2" align="right"> <button id="saveButton">Save</button></td>
    </tr>
</table>

Here I'm going to pass the values using the complex parameter. So I have created a class called ContentModel.

public class ContentModel
{
    public int ID { get; set; }
    public string Subject { get; set; }
    public string Content { get; set; }
}

The below is jQuery code, The jQuery click event is used to send values to the controller by clicking the button. $("#saveButton").click() bind the event handler to the javascript click event. When you click on the save button it will trigger the event.

When the event triggers, first the object will create with the input values.
The first input value is the ID integer, so it is converted to an integer using the parseInt
function. Using JSON.stringify(obj), the object is converted to a JSON string and passed to the /Home/Save controller action

<script>
    $("#saveButton").click(function () {
        obj = {
            ID: parseInt($("#idTextBox").val()),
            Subject: $("#subjectTextBox").val(),
            Content: $("#contentTextArea").val()        
        };

        $.ajax({
            url: '/Home/Save',
            contentType: 'application/json; charset=utf-8',
            type: 'POST',
            data: JSON.stringify(obj),
            cache: false,
            success: function () {
                alert("Saved");
            },
            error: function () {
                alert("Error");
            }
        });
    });
</script>

The below one is controller code. In the Save action [FromBody] is added to the parameter, so it will take the parameters from the body of the HTTP request.

public IActionResult Index()
{
    return View();
}

public IActionResult Save([FromBody]ContentModel content)
{
    return View(content);
}

The following is a screenshot of the code above.


The visual studio provides data tips to see the data value when the breakpoint is set. The following is a visual studio data tips screen. Here you can see the values that passed from view.



I hope this blog will help you. Keep coding

Comments

Post a Comment

Popular posts from this blog

Entity Framework Core (EF) with SQL Server LocalDB

-
Image
This blog is going to illustrate how to implement Entity Framework (EF) Core with SQL Server LocalDB. The Entity Framework Core enables access to data from the database. This allows developers to avoid having to write most of the data access code. And the SQL Server LocalDB works similarly to the SQL SERVER with few features. You can get the LocalDB when you install visual studio or visual studio express. You can find the .mdf and _log.ldf files in the C:/Users/{user} directory. Let see how to create a SQL Server LocalDB and implement Entity Framework Core Step 1: The first step is to add a connection. In the menu -> click Tools and select Connect to Database It will display the Add Connection window. Enter (localdb)\mssqllocaldb in the server name textbox. Then in the Select or enter a database, select master and click ok Now in the server explorer, you can find the master DB containing Tables, Views, Stored
Read more

Exploring EventCallback in Blazor: Building Interactive Components

-
Image
Introduction: Blazor is a powerful framework for building web applications using C# instead of JavaScript. It allows developers to create interactive and dynamic user interfaces with ease. One of the key features in Blazor is the EventCallback<T> pattern, which enables communication between components through events. In this blog post, we will explore how to use the EventCallback<T> pattern in Blazor by building a simple example. Creating the Event-Driven Component: Let's start by creating a Blazor component called MyComponent. This component will raise an event when a button is clicked. Here's the code for the MyComponent.razor file: MyComponent.razor < h3 > My Component < / h3 > < button @onclick = " RaiseEvent " > Raise Event < / button > @code { [ Parameter ] public EventCallback < string > EventRaised { get ; set ; } private async Task RaiseEvent ( ) { await EventRais
Read more

A Step-by-Step Guide to Implementing Identity in ASP.NET Core MVC

-
Image
Are you ready to enhance your ASP.NET Core MVC project with the power of Identity? In this comprehensive guide, we'll walk you through the process of setting up and customizing the Identity system in your web application. By the end of this tutorial, you'll be able to implement secure user authentication and authorization for your ASP.NET Core project. Step 1: Create a New ASP.NET Core Web App Begin by opening Visual Studio and selecting "ASP.NET Core Web App (Model-View-Controller)" as your project template. Follow these steps: 1. Open Visual Studio and create a new project, selecting "ASP.NET Core Web App (Model-View-Controller)". 2. In the "Configure your project" window, enter the project name and choose the project's location. 3. In the "Additional Information" window, select the framework and choose "Individual Accounts" as the Authentication type. 4. Click "Create" to generate your project.
Read more