I don't understand why I have null MVC AJAX

Question

I have Get and Post partial Action. Get take me a list of image which I have in ma app.

[HttpGet]
public PartialViewResult ViewImageFileList()
{
    IEnumerable<string> allImages = Directory.EnumerateFiles(Server.MapPath("~/Images/NBAlogoImg/"));

    return PartialView(allImages);
}

Post delete image which I extra.

[HttpPost]
public PartialViewResult ViewImageFileList(string imageNameType)
{
    var fileToDeletePath = Path.Combine(Server.MapPath("~/Images/NBAlogoImg/"), imageNameType);

    if (System.IO.File.Exists(fileToDeletePath))
    {
        fileOperations.Delete(fileToDeletePath);
    }

    return PartialView();
}

My .chhtml of my partial view

@model IEnumerable<string>

<div class="name-block-style">
     Логотипы которые имеются
</div>

<div id=team-logo-wrapper-images>
<ul>
    @foreach (var fullPath in Model)
    {
        var fileName = Path.GetFileName(fullPath);
        <li>
            <div class="box-name-image">

                <p class="image-name-type">@fileName</p>
                <img src="@Url.Content(string.Format("~/Images/NBAlogoImg/{0}", fileName))"
                     class="logo-images" alt="Логотип команды"
                     title="Логотип команды" />
            </div>
        </li>
    }
</ul>

<div id="delete-image-form" class="form-group">
     @using (Ajax.BeginForm(
    "ViewImageFileList",
    "Team",
     new AjaxOptions() { HttpMethod = "POST", OnComplete = "reloadPage()" }))
{
    <label>Введите имя с указание типа изображения</label>
    <input type="text" class="form-group" name="imageNameType" id="imageNameType" />
    <input type="submit" value="Удалить" class="btn btn-primary" />
}
</div>

<script>
    function reloadPage() {
        location.reload();
    }
</script>

My problem is Null references when I write the deleting image and submit it(i do it by ajax). I have this error Null reference but when I click to continue, the image deleted and my script to reload page work.

I want to understand why I take the null and how I can fix it, because it stops my app always when I delete an image.

Answer 1

The problem is that when you POST after you delete the image you don't populate the model of the partial view, as you do correctly in ViewImageFileList . This has a result when the View Engine try to build the view that you would send after the POST to the client, to get a null reference exception when try to perform the foreach on a null reference.

That being said, the thing you need is to pass to the PartialView all the images. So just add before the return statement in the action method you POST this:

var allImages = Directory.EnumerateFiles(Server.MapPath("~/Images/NBAlogoImg/"));
return PatialView(allImages);

Answer 2

When you browsing images you return view with model passed

return PartialView(allImages); //allImages is a model

But when you deleting images you return view without any model

return PartialView(); //need to pass a model

So after deleting you would like to redirect to ViewImageFileList to browse all images

[HttpPost]
public RedirectToRouteResult ViewImageFileList(string imageNameType)
{
    var fileToDeletePath = Path.Combine(Server.MapPath("~/Images/NBAlogoImg/"), imageNameType);

    if (System.IO.File.Exists(fileToDeletePath))
    {
        fileOperations.Delete(fileToDeletePath);
    }

    return RedirectToAction("ViewImageFileList");
}

or retrieve images in delete action once again and pass the list to view

[HttpPost]
public PartialViewResult ViewImageFileList(string imageNameType)
{
    var fileToDeletePath = Path.Combine(Server.MapPath("~/Images/NBAlogoImg/"), imageNameType);

    if (System.IO.File.Exists(fileToDeletePath))
    {
        fileOperations.Delete(fileToDeletePath);
    }

    IEnumerable<string> allImages = Directory.EnumerateFiles(Server.MapPath("~/Images/NBAlogoImg/"));

    return PartialView(allImages);
}