1

I am trying to use the partial view in asp.net MVC 5 . below are the steps that I followed. 1) In asp.net MVC application defined controller and model model details are

public class ImageData
{
    public int id { get; set; }

    public string imagePath { get; set; }

    public string encodedImage { get; set; }
}

controller has method as below

public class PopupWindowController : Controller
{
    // GET: PopupWindow
    public ActionResult Index()
    {
        ImageData objImg = new ImageData();
        return View(objImg);
    }
    [HttpPost]
    public ActionResult PopupwindowDisplay(ImageData objImg)
    {
        ClsDataOperations objDO = new ClsDataOperations();
        //ImageData objImg = new ImageData();
        objImg = objDO.GetImageData();

        Byte[] inputBytes = System.IO.File.ReadAllBytes(objImg.imagePath);
        Byte[] outputBytes;
        using (System.IO.MemoryStream inStream = new MemoryStream(inputBytes))
        using (MemoryStream outStream = new MemoryStream())
        {
            System.Drawing.Bitmap.FromStream(inStream).Save(outStream, System.Drawing.Imaging.ImageFormat.Png);
            outputBytes = outStream.ToArray();
        }
        objImg.encodedImage = Convert.ToBase64String(outputBytes);
        bool modelState = ModelState.IsValid;
        return PartialView(objImg);

    }
}

defined a partial view as "PopupwindowDisplay.cshtml"

@model OrderRestagingTest.DataAccess.ImageData

<h2>Test for the Modal popup</h2>
<p>Image path is : @Model.imagePath.ToString()</p>

main cshtml page from which I am trying to load this partial view is as below

@model OrderRestagingTest.DataAccess.ImageData

@{
    ViewBag.Title = "Display the PopUp Window from View";
}

<h2>Displaying the Popup Window on click on Button</h2>
<br/>
<p>
<a href="" id="openwindow" class="btn btn-primary">Open Window</a>
</p>
<div id="testview" style="width:50%; height:130px; display:none;">

</div>
<div id="opendialog" style="display: none">
</div>
@section scripts{
<script type="text/javascript">
    $(document).ready(function () {
        $("#opendialog").dialog({
            autoOpen: false,
            modal: true,
            title: "View Document"
        });

        $("#openwindow").click(function () {
            alert('button clicked');
            $.ajax({
                type: "POST",
                url: '@Url.Action("PopupwindowDisplay", "PopupWindow")',
                contentType: "application/html; charset=utf-8",
                dataType: "html",
                success: function (result)
                {
                    alert(result);
                    $("#testview").html(result);
                },
                failure: function (result) {
                    alert("failure",+result);
                },
                error: function (result) {
                    console.log(result);
                    alert("Error" + result);
                }
            });
        });

    });
</script>
}

tried loading the partial view in two div but not able to do that. it doesn;t show anything.Please let me know how can I find the error for the same.

Appreciate your help in this.

12
  • do you get some data in success call back Jul 31, 2017 at 19:29
  • I put the alert within the success method but didn't get any alert message. But in the controller method PopupwindowDisplay while debugging I can see objImg has values for the imagePath and encodedimage. Also same is appearing in the Partial view where I mentioned @Model.imagePath.ToString() . not sure why it is not coming in success Jul 31, 2017 at 19:38
  • Try something like this return PartialView("testview", objImg); Jul 31, 2017 at 19:38
  • See if above link helps you. Jul 31, 2017 at 19:39

3 Answers 3

0

You need to add the view name in return statement

   [HttpPost]
    public ActionResult PopupwindowDisplay(ImageData objImg)
    {
        ClsDataOperations objDO = new ClsDataOperations();
        //ImageData objImg = new ImageData();
        objImg = objDO.GetImageData();

        Byte[] inputBytes = System.IO.File.ReadAllBytes(objImg.imagePath);
        Byte[] outputBytes;
        using (System.IO.MemoryStream inStream = new MemoryStream(inputBytes))
        using (MemoryStream outStream = new MemoryStream())
        {
            System.Drawing.Bitmap.FromStream(inStream).Save(outStream, System.Drawing.Imaging.ImageFormat.Png);
            outputBytes = outStream.ToArray();
        }
        objImg.encodedImage = Convert.ToBase64String(outputBytes);
        bool modelState = ModelState.IsValid;
        return PartialView("_YourPartialViewName",objImg);

    }
1
  • view name is not required if you are having viewname same as actionname Aug 1, 2017 at 15:54
0

make it simple

$("#openwindow").click(function () {
        alert('button clicked');
        $.ajax({
            type: "POST",
            url: '@Url.Action("PopupwindowDisplay", "PopupWindow")',
            success: function (result)
            {
                alert(result);
                $("#testview").html(result);
            },
            failure: function (result) {
                alert("failure",+result);
            },
            error: function (result) {
                console.log(result);
                alert("Error" + result);
            }
        });
    });

I don't think you need contentType & dataType. Give a try it will work.

0

Thanks you all for your help . I was able to resolve the issue, Issue was with the anchor tag used

<a href="" id="openwindow" class="btn btn-primary">Open Window</a>

as href was mentioned as empty string , I just changed it to the href="javascript:;" as below

<a href="javascript:;" id="openwindow" class="btn btn-primary">Open Window</a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.