How to pass parameter to partial view on clicking Link?

Question

Hi I am developing MVC5 application. I have one partial view and it is basically popup. I am calling on click of link button as below.

window.open("/UploadDocument/ScannerUpload", "popupWindow", "width=1000,height=900,scrollbars=yes");

Below is my ScannerUpload.cshtml file.

<html>
<head>
    <script type="text/javascript">
        {
            function getParameterByName(name, url) {
                if (!url) url = window.location.href;
                name = name.replace(/[\[\]]/g, "\\$&");
                var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                    results = regex.exec(url);
                if (!results) return null;
                if (!results[2]) return '';
                return decodeURIComponent(results[2].replace(/\+/g, " "));
            }
            var foo = getParameterByName('Param1');
        }
    </script>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=8" />  
    <title>ScannerView</title>
</head>
<body>
    <div>
        <iframe src="http://Scanner.aufytech.com/C3CKYC Scanner.xbap?" width="1000" height="600" scrolling="auto"></iframe>      
    </div>
</body>
</html>

I want to send some params to ScannerUpload.cshtml file. May i know is there any way i can append params to ScannerUpload.cshtml? Any help would be appreciated. Thank you.

That depends on how will you use these parameters inside ScannerUpload? Will they in turn be passed to Scanner.xbap (whatever that is) — Nick.Mc, Jul 11 '17 at 05:21
Thank you Nick.MCDermaid. Yes i want to pass it to Scanner.xbap as well. May i know is there any way i can pass? — Niranjan Godbole, Jul 11 '17 at 05:22
Are you familiar with javascript? First, hard code parameters in your window.open call like this: `window.open("/UploadDocument/ScannerUpload?Param1=X&Param2=Y"....`. Then read this and see if you can pluck those parameters out. https://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters — Nick.Mc, Jul 11 '17 at 05:29
This is called a 'client side' solution because it solely uses javascript. Are you certain the xbap will accept parameters? You should also test this first by hard coding them before you fiddle too much with Javascript (which has sent many people including myself half crazy). Here some info I found on passing parameters to an XBAP http://nerddawg.blogspot.com.au/2006/05/passing-url-parameters-to-wpf-browser.html — Nick.Mc, Jul 11 '17 at 05:32
Yeah http://Scanner.aufytech.com/C3CKYC Scanner.xbap?Parameter1 If i pass like this i am able to get paramter in my xbap. — Niranjan Godbole, Jul 11 '17 at 05:34
That's great it means you have confirmed that piece of the process works — Nick.Mc, Jul 11 '17 at 05:36
Yes. I have appended now test parameters as below. /UploadDocument/ScannerUpload?Param1=X&Param2=Y‌. Now i want to add script inside scannerview.cshtml and inside script i have to read those parameters. If i am not wrong This is what i have to do right? — Niranjan Godbole, Jul 11 '17 at 05:37
Thank you. I have edited my question. now foo contains parameter. I want to add it to url. How this can be done? — Niranjan Godbole, Jul 11 '17 at 05:42

score 1 · Accepted Answer · answered Jul 11 '17 at 06:15

So, first thing you need to do is work out how to pass the parameters in your first call. So this:

window.open("/UploadDocument/ScannerUpload", "popupWindow", 
"width=1000,height=900,scrollbars=yes");

Needs to become this:

window.open("/UploadDocument/ScannerUpload?Param1=A&Param2=B", "popupWindow", 
"width=1000,height=900,scrollbars=yes");

How you do it is up to you, as I don't know where these parameters come from. If they are from fields on a html page, you need to use javascript events to dynamically update your window.open.

Now you need to pick up those parameters in the second window. In retrospect, I realise we don't need to parse out the parameters we can just grab the end of the URL

So referring heavily to these: dynamically set iframe src iFrame onload JavaScript event

Something like this might work (untested sorry):

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=8" />  
    <title>ScannerView</title>
</head>
<body>
    <div>
        <iframe id="myIframe" src="" width="1000" height="600" scrolling="auto" onLoad="fUpdateiFrame();"></iframe>      
    </div>

    <script type="text/javascript">
            function fUpdateiFrame() {
                if (!url) url = window.location.href;
                document.getElementById('myIframe').src = "http://Scanner.aufytech.com/C3CKYC Scanner.xbap?" + url.split("?")[1];
            }
    </script>

</body>
</html>

Changes made:

Add an ID to the iframe element so we can refer to it in javascript
Add an event to the iframe element so that it calls a javascript function when its ready
Add some javascript that chops out the query parameters (everything after the ?) and adds that to the URL, before setting the new iframe src value

I'd be suprised if this works first time - please post back any issues.

Awesome! Glad to hear it. My JS must be getting better. – Nick.Mc Jul 11 '17 at 07:37 — Nick.Mc, Jul 11 '17 at 07:37

How to pass parameter to partial view on clicking Link?

1 Answers1