asp.net mvc partial view code example

Example 1: asp net core mvc partial view

<partial name="_PartialName" />

Example 2: mvc asp.net partial view from js

//You can call a Partial View through AJAX

<div id="containerId"></div>

$.ajax({
    type: "Get",
    url: '<Your url>/GetView',
    data: mydata,
    contentType: "application/text; charset=utf-8",
    dataType: "text",
    success: function (data, status) {
      	//Use append to add it to the div and not overwrite it 
		//if you have other data in your container
        $('#containerId').append(data);
    },
    error: function (err) {
        console.log(err);
    }
});

//In C#

/// <summary>
/// Renders a single view.
/// NOTE : PARTIAL VIEW CANNOT RENDER MULTIPLE VIEWS!
/// Instead loop through them.
/// </summary>
/// <param name="obj">JSON object containing input data</param>
/// <returns></returns>
[HttpGet]
public ActionResult GetView(string obj)
{
    //Parse the object into a model
    try
    {
        MyModel model = (new JavaScriptSerializer()).Deserialize<MyModel>(obj);
        return View("<Your View name>", obj);

    }
    catch (Exception ex)
    {
        return Json(ex.Message, JsonRequestBehavior.AllowGet);
    }

}

Example 3: partial MVC

<partial name="ThenName" model="object" />

Example 4: asp.net mvc render multiple partial views

// You can't reutrn multiple partial views.
// However you can by pass this by simply looping a action

// in your .cshtml use Razor:

@{
  	// Note! Using this method you can't pass JS variables;
	// they are loaded in runtime 
	int loopThisManyTimes = 10;
	for (int i = 0; i < loopThisManyTimes; i++)
	{
      	MyModel model = new MyModel();
		Html.RenderPartial("<Your view name>", model);	
	}
}

// Or use JQuery:

$.ajax({
    type: "POST",
    url: '<Your URL>',
    contentType: "application/text; charset=utf-8",
    dataType: "text",
    success: function (data) {
        $("<Your container id>").html(data);
    },
    error: function (errData) {
      	// An error occured!
        $("<Your container id>").html(errData);
    }
});