使用MVC部分视图进行Ajax调用

Question

I am trying to make an ajax call to get data and to Modify DOM.

here is my controller/ action looks like

   [HttpGet]
public ActionResult Index(int id)
{
// some code
return PartialView(Custom Object);
}

here is my Index View looks like

@Model CustomObject
    @foreach(loop thru Model)
    {
// add some other elements
}
if(Model.Count==0){
<script>some script</script>
}else{
<script>variable = '<div></div>'</script>
}

here is main view code

<script>var variable ='';</script>
<script>$('element').html(variable)</script>
<tbody id="tbodyId">
@RenderAction("Index");
<tbody>

here is my Ajax Call. I was trying to do

function test(id){
$.ajax({
type:'Get',
url:'/Home/Index?id='+id,
datatype:'html'
})
.done(function(data){
$('#tbodyId').html(data);
});
}

My issue is from the above ajax call it is not appending the script element from partial view.

I tried different ways from javascript side. But, im not sure whether im doing it right way or not. So, i need some suggestions from leads.

here is the other way i tried. but no luck

var scriptElement = document.createElement('script');
            scriptElement.innerHTML = $('#tbodyId').last().html();
            document.getElementById('#tbodyId').appendChild(scriptElement);

any help would be appreciated. Thanks!!

Answer 1

 $.ajax({ url:'/Home/Index?id='+id, type:'Get', datatype:'html', complete : function(data){ $('#tbodyId').html(data); }, error : function(data){ alert(data); } }); 

Try this ajax Call function. hope this will help. If still any issue will come error message give clear picture of that.