Unable to pass parameters using ViewBag in jQuery within a partial view

Question

Unable to pass parameters using ViewBag in jQuery within a partial view

Currently, I am in the process of building an MVC3 application with razor syntax. My focus right now is on developing the partial class that will be responsible for handling comments.

This is a snippet of my code:

<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#AddCommentButton').click(function () {
            $.ajax({
                type: 'post',
                url: '/Comment/SaveComments',
                dataType: 'json',
                data:
                { 
                    'comments': $('#Comment').val(), @ViewBag.EType, @ViewBag.EId
                 },

                   success: function (data) {

                    $("p.p12").append

                   $('.ShowComments').text('Hide Comments');

                }
            });
        });
    });
</script>

I am encountering an issue where I am attempting to pass parameters from the View to the controller using ViewBag within the jQuery code above, but it appears to not be functioning as expected. Any suggestions on how I could resolve this?

javascript asp.net-mvc asp.net-mvc-3

Answer 1

Answer №1

Here is a suggested code snippet:

<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#AddCommentButton').click(function () {
            $.ajax({
                type: 'post',
                url: '@Url.Action("SaveComments", "Comment")',
                data: { 
                    comments: $('#Comment').val(), 
                    etype: @Html.Raw(Json.Encode(ViewBag.EType)), 
                    eid: @Html.Raw(Json.Encode(ViewBag.EId))
                },
                success: function (data) {
                    $("p.p12").append(data);
                    $('.ShowComments').text('Hide Comments');
                }
            });
        });
    });
</script>

It is also possible to handle the controller action in the following ways:

[HttpPost]
public ActionResult SaveComments(string comments, string etype, string eid)
{
    ...
}

Alternatively, you can create a view model like this:

public class SaveCommentViewModel
{
    public string Comments { get; set; }
    public string EType { get; set; }
    public string EId { get; set; }
}

After defining the view model, proceed with the controller action as shown below:

[HttpPost]
public ActionResult SaveComments(SaveCommentViewModel model)
{
    ...
}

Answer 2

Here is a suggested code snippet:

<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#AddCommentButton').click(function () {
            $.ajax({
                type: 'post',
                url: '@Url.Action("SaveComments", "Comment")',
                data: { 
                    comments: $('#Comment').val(), 
                    etype: @Html.Raw(Json.Encode(ViewBag.EType)), 
                    eid: @Html.Raw(Json.Encode(ViewBag.EId))
                },
                success: function (data) {
                    $("p.p12").append(data);
                    $('.ShowComments').text('Hide Comments');
                }
            });
        });
    });
</script>

It is also possible to handle the controller action in the following ways:

[HttpPost]
public ActionResult SaveComments(string comments, string etype, string eid)
{
    ...
}

Alternatively, you can create a view model like this:

public class SaveCommentViewModel
{
    public string Comments { get; set; }
    public string EType { get; set; }
    public string EId { get; set; }
}

After defining the view model, proceed with the controller action as shown below:

[HttpPost]
public ActionResult SaveComments(SaveCommentViewModel model)
{
    ...
}

Unable to pass parameters using ViewBag in jQuery within a partial view

Answer №1

Similar questions

Generate a vector3 with a defined direction

Tips on saving HTML table information into a .txt document?

div or paragraph element nested within a flex container

Ajax not functioning after submission of form

Concealing specific HTML elements with ng-view in AngularJS

Verifying the Absence of Events in the Chosen Month Display of the FullCalendar jQuery Plugin

Navigating a vast code repository in Node.js

Adjusting the opacity of a div while scrolling

The function is not valid due to an angular-parse argument

How to effectively compare time duration with a timer in the Laravel framework

Utilizing .isDisplayed() in conjunction with .each() in ProtractorJS for Angular: A guide

Memory leakage in Internet Explorer as a result of JavaScript code

Empty array returned when using fetch in a for loop

NodeJS guide: Enabling cross-domain access for web services

Understanding variable scopes in the success callback function of a JQuery post request

Can you provide me the steps to delete the title attribute from images in Wordpress?

How can I stop jQuery mobile from updating the document title?

Error when spaces are present in the formatted JSON result within the link parameter of the 'load' function in JQuery

Using the debug module, we're able to set up debugging for our Express application with the specific tag "express-locallibrary-tutorial:server". I am curious to understand the purpose and significance of this setup

Axios: Exception handling does not involve entering the catch method