1
votes

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.

3
do you get some data in success call backUnbreakable
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 successPuneet Verma
Try something like this return PartialView("testview", objImg);Unbreakable
See if above link helps you.Unbreakable

3 Answers

0
votes

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);

    }
0
votes

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
votes

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>