Reputation: 85

How can I return the HTML from MVC controller to a div in my view

I'm trying to return the generated HTML string to the view to dynamically generate a HTML table with results. I'm not able to get the returned HTML string any suggestions and help is greatly appreciated.

Here is my Controller code

    public ActionResult ValidateTrams()
    {
        string html = "";
        if (Request.Files.Count == 0 || Request.Files[0].ContentLength == 0)
        {
        }

        else
        {
            html = ProcessTextFile(Request.Files[0].InputStream);
        }

        return View(html);
    }

I'm trying to grab this returned result in jquery like this

$('#tramsView').live('click', function () {

$.ajax({
    url: '/Booking/ValidateTrams',
    type: 'POST',
    dataType: 'jsonp',
    success: function (data) {
        alert(data);
        $('#TramsViewFrame').html(data);
    },
    error: function (jqxhr, textStatus, errorThrown) {
        $(window).hideWaitScreen();
        if (confirm(errorThrown)) { window.location.reload(); }
    }
});

});

Finally Below is the CSHTML for the form. Here I'm reading a file from a form with a button type submit

<form action="#" method="post" enctype="multipart/form-data" class="forms" name="form"
            id="frmvalidate">
            <table>
                <tr>
                    <td>
                        <input type='file' name='trams' id='ValidatetramsFile' />
                    </td>
                </tr>
                <tr>
                    <td>
                        <br />
                        <input name="cbDisplayUmatched" id="cbDisplayUmatched" type="checkbox" value="" checked="true" />
                        <label style="text-decoration: none; outline: none; font-size: 1.1em; padding: 3px 0 0px 0;">
                            Display rows that were <strong>NOT</strong> parsed</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <br />
                        <div class="buttons">
                            <button type="submit" value="VIEW" class="ui-state-default ui-corner-all" id="tramsView">VIEW</button>
                        </div>
                    </td>
                </tr>
            </table>
            </form>

Thanks for your time and really appreciate your help. Kind Regards!!!

Upvotes: 8

Answers (6)

code black

Reputation: 1

instead of storing in "string" store html codes in following format:

        HtmlString s = new HtmlString("<html coding/>");
        ViewData["Id_as_per_your_choice"] = s;
        return View("page_you_want to_respond");

then place "<%: ViewData["Id_Same_as_that_in_above_code"] %>" where ever you want that html code to appear......simple..... but make initial value of Viewdata as null in "index()"method so that code doesnot appear on page load....

Upvotes: 0

COLD TOLD

Reputation: 13579

In your controller since you are using ajax post you need to return as JSON it would be something like this

return Json(html);

Upvotes: 1

ngm

Reputation: 7457

It sounds as if your form is still submitting a normal postback, so any asynchronous calls that you're doing are being lost.

Try preventing the default form submission taking place with the following:

$('#tramsView').live('click', function (evt) {

    evt.preventDefault();

    // ... rest of your code 

});

Incidentally, in this case, if all you're doing is updating the html on your #TramsViewFrame, you could just use the slightly simpler $.load() method:

$('#tramsView').live('click', function (evt) {
    evt.preventDefault();
    $('#TramsViewFrame').load('/Booking/ValidateTrams');
});

Upvotes: 4

codeandcloud

Reputation: 55210

Make these changes

Give the attribute HttpPost on top of your controller

[HttpPost]
public ActionResult ValidateTrams()

return the string as Json like this from the controller.

return Json(new { success = html });

Finally change your dataType from ~~jsonp~~ to json

$('#tramsView').live('click', function() {
    $.ajax({
        url: '/Booking/ValidateTrams',
        type: 'POST',
        dataType: 'json',
        success: function(data) {
            alert(data.success);
            $('#TramsViewFrame').html(data.success);
        },
        error: function(jqxhr, textStatus, errorThrown) {
            $(window).hideWaitScreen();
            if (confirm(errorThrown)) {
                window.location.reload();
            }
        }
    });
});

P.S: If you are using the latest version of jQuery (1.7+), please change the .live handler to .on handler. Not mandatory :)

Upvotes: 3