Form Element Appended from Ajax not working- Asp.net

devdeb26
January 12, 2022
194 views
2 votes
4 Answers

I have this code for form method in ajax

 $.ajax({
    type: "GET",
    url: "/MainPage/GetAllRecords",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        console.log(data);
        $.each(data, function (key, value) {
            
            $("#loadNotes").append(
                '<form method="GET">' +
                '<div class="container py-3 px-4" style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; /* margin-top: 1rem; */ box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis;  /* overflow-wrap: break-word; */ ">' +

                '<a class="stretched-link" asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="' + value.id + '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' + value.title + '</a>' +
                '<p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" class="text-break text-truncate">' + value.description + '</p>' +

                '</div>' +
                '</form>'
               ) ;
        });
    },
    error: function (response) {
        alert(response);
    }
});

I already tried to put the form method and other elements under cshtml file and from there it works, it is calling the controller and view but not from ajax.

what am I missing? Please help thank you

Answers

- LeandroCosta
- January 12, 2022 at 4:06 am
- 0 votes
0
the type property you passed as GET should be method I suppose.

The remaining code seems ok. Have you checked your browser console for errors ?

Login or Signup to reply.

Maybe store the html "form tag" in a variable first then use .html() to append the forms to #loadNotes

And make sure add (document) after your ‘#loadNotes’ to absolutely find the element in the document. $("#loadNotes", document)

Also success: function and error: function is kinda old. try .done and .fail

Old Method of Ajax.

 $.ajax({
    type: "GET",
    url: "/MainPage/GetAllRecords",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        console.log(data);
        var html_forms = '';
        $.each(data, function (key, value) {
                html_forms += '<form method="GET">' +
                '<div class="container py-3 px-4" style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; /* margin-top: 1rem; */ box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis;  /* overflow-wrap: break-word; */ ">' +
                '<a class="stretched-link" asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="' + value.id + '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' + value.title + '</a>' +
                '<p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" class="text-break text-truncate">' + value.description + '</p>' +
                '</div>' +
                '</form>';
        });

        $("#loadNotes", document).html(html_forms);
    },
    error: function (response) {
        alert(response);
    }
});

New Method of Ajax

 $.ajax({
    type: "GET",
    url: "/MainPage/GetAllRecords",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
}).done(function(data) {
        console.log(data);
        var html_forms = '';
        $.each(data, function (key, value) {
                html_forms += '<form method="GET">' +
                '<div class="container py-3 px-4" style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; /* margin-top: 1rem; */ box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis;  /* overflow-wrap: break-word; */ ">' +
                '<a class="stretched-link" asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="' + value.id + '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' + value.title + '</a>' +
                '<p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" class="text-break text-truncate">' + value.description + '</p>' +
                '</div>' +
                '</form>';
        });

        $("#loadNotes", document).html(html_forms);
}).fail(function(response) {
       alert(response);
});

EDIT: Change this part to < button

From this

'<a class="stretched-link" asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="' + value.id + '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' + value.title + '</a>'

To this

'<button class="stretched-link" asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="' + value.id + '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' + value.title + '</button>'

and add action on this

html_forms += '<form action="php_controller.php" method="GET">' +

use Backtick “

$("#loadNotes").append(`
    <form method="GET">
        <div class="container py-3 px-4" style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; ">
           <a class="stretched-link" asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="` + value.id + `"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit"> ` + value.title + `</a>
           <p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" class="text-break text-truncate">` + value.description + `</p>
        </div>
    </form>
`);

Here is a whole working demo:

Model:

public class TestModel
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
}

View:

<div id=loadNotes>

</div>
@section Scripts
{
    <script>
        $(function(){
            $.ajax({
                type: "GET",
                url: "/MainPage/GetAllRecords",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    console.log(data);
                    $.each(data, function (key, value) {
            
                        $("#loadNotes").append(
                            '<form method="GET">' +
                            '<div class="container py-3 px-4" style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; /* margin-top: 1rem; */ box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis;  /* overflow-wrap: break-word; */ ">' +
                //change here.......    
                            '<a class="stretched-link" href="/MainPage/ShowRecord/' + value.id + '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' + value.title + '</a>' +
                            '<p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" class="text-break text-truncate">' + value.description + '</p>' +

                            '</div>' +
                            '</form>'
                            ) ;
                    });
                },
                error: function (response) {
                    alert(response);
                }
            });
        })
         
    </script>
}

Controller:

public class MainPageController : Controller
{
    public IActionResult GetAllRecords()
    {
        //hard-coded the data for easy testing
        var model = new List<TestModel>()
        {
            new TestModel(){Id=1,Title="aa",Description="des1"},
            new TestModel(){Id=2,Title="bb",Description="des2"},
            new TestModel(){Id=3,Title="cc",Description="des3"}
        };
        return Json(model);
    }
}

Note:

Tag Helpers are interpreted. In other words, Razor must see them as actual tags in order to replace them. Here, it’s just a JS string, and Razor will not mess with that. So it will not generate the href by js.

You need to set the href value manually. Change the js to:

'<a class="stretched-link" href="/MainPage/ShowRecord/' + value.id + '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' + value.title + '</a>' +

Please signup or login to give your own answer.

Click here to cancel reply.

Form Element Appended from Ajax not working- – Asp.net

Answers

Note: