appending div with partial view content

Question

I'm sending request from my view to the controller which as a result sending partialview page. Result is appended in desired div. Only problem is that partial view content is displayed as source html content (css is not rendered properly).

Since I'm guessing that problem may be inside javascript or partialview view here it is

partiaView.cshtml

@foreach (var item in Model)
{
    <div class="product clearfix">
        <div class="l-new">
            <a href="#">
                <!-- -->
            </a>
        </div>
    ...
    </div>
}

jsfile.js

function GetTabData(xdata) {
    $.ajax({
        url: ('/Home/GetData'),
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({ id: xdata }),

        success: function (result) {
            $.each(result, function (i, item) {               
                $("#mytabDiv").append(item);                
            })
        },
        error: function () { alert("error"); }
    });
}

Thanks

Update: When I'm using

> html

instead of append

$("#mytabDiv").html(item);        

div content is not populated at all.

Answer 1

Since your partial expecting IEnumerable collection you don't need to iterate on js side. Just send result.

These should work

success: function (result) {
           $("#mytabDiv").html(result);                
         },
         error: function () { alert("error"); }