JavaScript 링크 "#"또는 "javascript : void (0)"에 어떤 "href"값을 사용해야합니까?

다음은 JavaScript 코드를 실행하기위한 목적으로 만 링크를 작성하는 두 가지 방법입니다. 기능, 페이지로드 속도, 유효성 검사 등의 측면에서 어떤 것이 더 좋습니까?

function myJsFunc() {
    alert("myJsFunc");
}

<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

또는

function myJsFunc() {
    alert("myJsFunc");
}

 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

사용 javascript:void(0)합니다.

세 가지 이유. #개발자 팀 사이 에서 사용을 권장하면 필연적으로 다음과 같은 함수의 반환 값을 사용하게됩니다.

function doSomething() {
    //Some code
    return false;
}

그러나 그들은 return doSomething()onclick에서 사용하는 것을 잊고 그냥 사용 doSomething()합니다.

피하는 두 번째 이유 는 호출 된 함수가 오류를 던지면 #최종 결과 return false;가 실행되지 않기 때문입니다. 따라서 개발자는 호출 된 함수에서 오류를 적절히 처리해야합니다.

세 번째 이유는 onclick이벤트 속성이 동적으로 할당 되는 경우가 있기 때문입니다 . 하나의 첨부 방법 또는 다른 방법으로 함수를 특별히 코딩하지 않고도 함수를 호출하거나 동적으로 할당하는 것을 선호합니다. 따라서 onclickHTML 마크 업의 내 (또는 무엇이든)는 다음과 같습니다.

onclick="someFunc.call(this)"

또는

onclick="someFunc.apply(this, arguments)"

를 사용 javascript:void(0)하면 위의 모든 두통을 피할 수 있으며 단점의 예를 찾지 못했습니다.

따라서 고독한 개발자라면 자신이 직접 선택할 수 있지만 팀으로 일하는 경우 다음 중 하나를 명시해야합니다.

를 사용 href="#"하여 onclick항상 return false;끝에 포함 하고 호출 된 함수가 오류를 발생시키지 않도록하고 함수를 동적으로 onclick속성에 첨부하면 오류를 발생시키지 않아야 합니다 false.

또는

사용하다 href="javascript:void(0)"

두 번째는 분명히 의사 소통하기가 훨씬 쉽습니다.

둘 다.

실제 URL이 있으면 HREF로 사용하십시오. 링크를 마우스 가운데 버튼으로 클릭하여 새 탭을 열거 나 JavaScript가 비활성화되어 있으면 onclick이 실행되지 않습니다.

이것이 가능하지 않은 경우 최소한 JavaScript 및 적절한 클릭 이벤트 핸들러를 사용하여 앵커 태그를 문서에 삽입해야합니다.

나는 이것이 항상 가능하지는 않다는 것을 알고 있지만, 내 의견으로는 모든 공공 웹 사이트를 개발하기 위해 노력해야합니다.

확인 겸손한 자바 스크립트 와 점진적 향상 (모두 위키 백과).

수행 <a href="#" onclick="myJsFunc();">Link</a>하거나 <a href="javascript:void(0)" onclick="myJsFunc();">Link</a>또는 포함하는 어떤 다른 onclick속성을 - 좋아 다시 5 년 전,하지만 지금은 나쁜 관행이 될 수 있습니다. 이유는 다음과 같습니다.

1. 그것은 유지하기 어려우며 확장하기 어려운 것으로 판명 된 눈에 띄는 JavaScript의 실천을 장려합니다. 이에 대한 자세한 내용은 Unobtrusive JavaScript 입니다.

2. 엄청나게 지나치게 장황한 코드를 작성하는 데 시간을 투자하고 있습니다.이 코드는 코드베이스에 거의 이점이 없습니다.

3. 원하는 결과를 달성하는 데 더 좋고, 쉽고, 유지 보수가 쉽고 확장 가능한 방법이 있습니다.

눈에 잘 띄지 않는 JavaScript 방식

href속성 이 전혀 없습니다 ! CSS를 올바르게 재설정하면 기본 커서 스타일이 누락되어 처리되므로 문제가되지 않습니다. 그런 다음 우아하고 눈에 거슬리지 않는 모범 사례를 사용하여 자바 스크립트 기능을 추가하십시오. 이는 자바 스크립트 로직이 마크 업 대신 자바 스크립트로 유지 될 때 유지 관리가 쉬워집니다. 이는 로직을 분리해야하는 대규모 자바 스크립트 애플리케이션 개발을 시작할 때 필수적입니다. 블랙 박스 구성 요소 및 템플릿. 이에 더 큰 규모의 자바 스크립트 응용 프로그램 아키텍처

간단한 코드 예

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});

a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

블랙 박스 된 Backbone.js 예제

확장 가능하고 블랙 박스 처리 된 Backbone.js 구성 요소 예를 보려면이 작동하는 jsfiddle 예를 참조하십시오 . 우리가 눈에 거슬리지 않는 JavaScript 관행을 활용하는 방법에 주목하고, 적은 양의 코드에는 여러 구성 요소 인스턴스 간의 부작용이나 충돌없이 페이지에서 여러 번 반복 할 수있는 구성 요소가 있습니다. 놀랄 만한!

노트

• 요소 에서 href속성을 생략하면 키 탐색을 a사용하여 요소에 액세스 할 수 없습니다 tab. tab키 를 통해 해당 요소에 액세스 하려면 tabindex속성을 설정 하거나 button대신 요소를 사용할 수 있습니다 . Tracker1의 answer 에서 언급했듯이 버튼 요소의 스타일을 일반 링크처럼 쉽게 지정할 수 있습니다 .

• 요소 에서 href특성을 생략 a하면 Internet Explorer 6 및 Internet Explorer 7 이 a:hover스타일 을 적용하지 않으므로 a.hover대신 이를 통해 간단한 JavaScript shim을 추가했습니다 . href 속성이없고 우아한 저하가없는 것처럼 링크가 작동하지 않는 것처럼 완벽하게 괜찮습니다. 더 큰 문제가 생길 것입니다.

• 자바 스크립트를 비활성화 한 상태에서 작업을 계속 수행하려면 Ajax 요청을 통해 또는 수동으로 작업을 수행하는 대신 수동으로 작업을 수행하는 일부 URL로 이동 a하는 href속성이 있는 요소 를 사용하십시오 . 이 작업을 수행하는 event.preventDefault()경우 버튼 클릭시 링크를 따라 가지 않는지 확인하기 위해 클릭 통화를 수행해야합니다. 이 옵션을 정상 성능 저하라고합니다.

'#'사용자를 페이지 상단으로 다시 이동 시키므로 일반적으로으로 이동합니다 void(0).

javascript:; 또한 같은 행동 javascript:void(0);

나는 정직하게 제안하지 않을 것입니다. 나는 <button></button>그 행동을 위해 양식화 된 것을 사용합니다 .

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}

<p>A button that looks like a <button type="button" class="link">link</button>.</p>

이런 식으로 onclick을 할당 할 수 있습니다. 또한 onclick요소 태그 의 속성을 사용하지 않고 스크립트를 통한 바인딩을 제안 합니다. 유일한 단점은 비활성화 할 수없는 이전 IE의 psuedo 3d 텍스트 효과입니다.

반드시 A 요소를 사용해야하는 경우 javascript:void(0);이미 언급 한 이유로 사용하십시오 .

• onclick 이벤트가 실패하는 경우 항상 차단합니다.
• 잘못된로드 호출이 발생하지 않거나 해시 변경을 기반으로 다른 이벤트를 트리거하지 않습니다.
• 클릭이 실패 (온 클릭 발생)하는 경우 해시 태그로 인해 예기치 않은 동작이 발생할 수 있으며, 해당 동작이 적절하지 않은 경우이를 피하고 탐색 기록을 변경하려고합니다.

참고 :를 클릭하여 실제로 수행 할 작업을 나타내는 추가 표시기 역할을 할 수 0있는 문자열로 바꿀 수 있습니다 javascript:void('Delete record 123').

첫 번째는 사용자가 JavaScript를 비활성화 한 경우 따라야 할 실제 링크입니다. JavaScript가 실행될 때 click 이벤트가 발생하지 않도록하려면 false를 반환해야합니다.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Angular2를 사용하면 다음과 같이 작동합니다.

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

여기를 참조하십시오 https://stackoverflow.com/a/45465728/2803344

당신이 나에게 묻는다면;

"링크"에 JavaScript 코드를 실행하려는 목적이있는 경우 링크로 인정되지 않습니다. 오히려 JavaScript 함수가 결합 된 텍스트입니다. <span>태그가 onclick handler첨부 된 태그와 일부 기본 CSS를 사용하여 링크를 모방하는 것이 좋습니다 . 탐색을위한 링크가 있으며 JavaScript 코드가 탐색 용이 아닌 경우 <a>태그 가 아니어야합니다 .

예:

function callFunction() { console.log("function called"); }

.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}

<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>

이상적으로는 다음을 수행하십시오.

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

또는 HTML에 기본 작업 링크가 있으며 DOM 렌더링 후 JavaScript를 통해 요소에 onclick 이벤트를 눈에 띄게 추가하여 JavaScript가 존재하지 않거나 사용되지 않는 경우 쓸모없는 이벤트 핸들러가 코드를 방해하고 잠재적으로 실제 콘텐츠를 혼란스럽게 만듭니다.

를 사용 #하면 재미있는 움직임이 발생하므로의 #self입력 노력을 절약 하려면 사용 하는 것이 좋습니다 JavaScript bla, bla,.

나는 다음을 사용한다

<a href="javascript:;" onclick="myJsFunc();">Link</a>

대신에

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>

href속성에 일반 URL을 사용 하고 onclick에서 일부 JavaScript 함수를 호출 해야한다는 제안에 동의합니다 . 단점은 return false통화 후 자동으로 추가한다는 것 입니다.

이 방법의 문제점은 기능이 작동하지 않거나 문제가 발생하면 링크를 클릭 할 수 없게된다는 것입니다. Onclick 이벤트는 항상을 반환 false하므로 일반 URL은 호출되지 않습니다.

매우 간단한 해결책이 있습니다. true제대로 작동하면 함수를 반환하자 . 그런 다음 반환 된 값을 사용하여 클릭을 취소해야하는지 여부를 결정하십시오.

자바 스크립트

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

doSomething()함수 의 결과를 부정한다는 점에 유의하십시오 . 작동하면을 반환 true하므로 무효화되고 ( false) path/to/some/URL호출되지 않습니다. 함수가 반환하는 경우 false, 그것은을 부정한다 (예를 들어, 브라우저는 함수 내에서 사용하는 것을 지원하지 않습니다 또는 아무것도 다른 잘못) true와이 path/to/some/URL라고합니다.

#보다 낫지 javascript:anything만 다음이 훨씬 좋습니다.

HTML :

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

자바 스크립트 :

$(function() {
    $(".some-selector").click(myJsFunc);
});

사용자가 JavaScript를 사용할 수없는 경우 (사양 및 예산이있는 경우)에는 항상 정상적인 성능 저하를 위해 노력해야합니다. 또한 JavaScript 속성과 프로토콜을 HTML에서 직접 사용하는 것은 잘못된 형식으로 간주됩니다.

특히 컨트롤에서 데이터를 변경해야하는 경우 <button>요소를 대신 사용하는 것이 좋습니다 . (POST와 같은 것)

눈에 잘 띄지 않는 점진적 향상 유형의 요소를 주입하면 더 좋습니다. ( 이 의견 참조 )

JavaScript를 사용하여 링크를 작성하지 않는 한 (브라우저에서 활성화되어 있음을 알 수있는 경우) JavaScript를 사용하지 않고 탐색하는 사용자에게 적절한 링크를 제공 한 다음 onclick에서 링크의 기본 동작을 방지해야합니다. 이벤트 핸들러. 이런 식으로 JavaScript를 사용하는 사용자는 기능을 실행하고 JavaScript를 사용하지 않는 사용자는 링크를 클릭하고 아무 일도 발생하지 않고 적절한 페이지 (또는 동일한 페이지 내의 위치)로 이동합니다.

#JavaScript에서는 의사 스키마이기 때문에 확실히 해시 ( )가 좋습니다.

1. 역사를 오염
2. 엔진의 새로운 사본을 인스턴스화
3. 글로벌 범위에서 실행되며 이벤트 시스템을 존중하지 않습니다.

물론 기본 액션을 막는 onclick 핸들러가있는 "#"이 훨씬 좋습니다. 또한, 자바 스크립트를 실행하기위한 유일한 목적을 가진 링크는 사용자가 페이지의 어떤 현명한 앵커로 사용자를 보내지 않는 이상 (링크 만) 링크가 아닙니다. 스타일 시트와의 링크 모양과 느낌을 시뮬레이션하고 href를 전혀 잊어 버릴 수 있습니다.

또한 cowgod의 제안과 관련하여 특히 다음과 같습니다. ...href="javascript_required.html" onclick="...이것은 좋은 접근 방법이지만 "JavaScript 사용 안함"과 "클릭 실패"시나리오를 구분하지는 않습니다.

나는 보통

<a href="javascript:;" onclick="yourFunction()">Link description</a>

javascript : void (0)보다 짧으며 동일한 기능을 수행합니다.

나는 사용할 것이다 :

<a href="#" onclick="myJsFunc();return false;">Link</a>

원인:

1. 이것은 href단순하고 검색 엔진에 필요합니다. 문자열과 같은 다른 것을 사용하면 404 not found오류 가 발생할 수 있습니다 .
2. 마우스를 링크 위로 가져 가면 스크립트임을 표시하지 않습니다.
3. 을 사용 return false;하면 페이지가 맨 위로 이동하거나 back버튼을 깰 수 없습니다 .

javascript:void(0)콘텐츠 메뉴를 열려면 마우스 오른쪽 버튼을 클릭하지 못할 수 있으므로 use를 선택 합니다. 그러나 javascript:;더 짧고 같은 일을합니다.

따라서 <a />태그를 사용하여 JavaScript 작업을 수행 할 때 삽입하면 인라인 이벤트 바인딩의 경우 다음과 같이 이벤트 끝에 false 를 반환href="#" 할 수 있습니다 .

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

또는 다음 과 같이 JavaScript를 사용하여 href 속성을 변경할 수 있습니다 .

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

또는

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

그러나 의미 적으로, 이것을 달성하는 위의 모든 방법은 잘못되었습니다 (그러나 잘 작동합니다) . 페이지를 탐색하기 위해 작성된 요소가없고 연관된 JavaScript가있는 요소는 <a>태그 가 아니어야합니다 .

<button />모든 요소에 이벤트를 추가 할 수 있기 때문에 대신 a를 사용하여 필요에 따라 b, span 또는 기타 요소와 같은 다른 요소를 수행 할 수 있습니다.

따라서 사용하면 이점이 하나 있습니다 <a href="#">. 할 때 기본적으로 해당 요소에 커서 포인터가 나타납니다 a href="#". 이를 위해 CSS를 사용 cursor:pointer;하여이 문제를 해결할 수 있다고 생각합니다 .

그리고 마지막으로 JavaScript 코드 자체에서 이벤트를 바인딩하는 경우 태그 event.preventDefault()를 사용하는 경우이를 달성 할 수 <a>있지만 <a>태그를 사용하지 않는 경우 이점이 있습니다. 이 작업을 수행해야합니다.

보시다시피 이런 종류의 물건에는 태그를 사용하지 않는 것이 좋습니다.

JavaScript를 실행하기위한 목적으로 만 링크를 사용하지 마십시오.

href = "#"을 사용하면 페이지가 맨 위로 스크롤됩니다. void (0)을 사용하면 브라우저 내에서 탐색 문제가 발생합니다.

대신 링크 이외의 요소를 사용하십시오.

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

CSS로 스타일을 지정하십시오.

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

jQuery를 사용하는 것이 좋습니다.

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

모두를 생략 href="#"하고 href="javascript:void(0)".

앵커 태그 마크 업은

<a onclick="hello()">Hello</a>

충분히 간단합니다!

AngularJS를 사용하는 경우 , 다음을 사용할 수 있습니다 :

<a href="">Do some fancy JavaScript</a>

아무것도하지 않습니다.

게다가

• (#)과 같이 페이지 상단으로 이동하지 않습니다
  • 따라서 falseJavaScript 를 명시 적으로 반환 할 필요가 없습니다.
• 간결하다

이 경우에는 href아마도 앵커 태그를 사용할 이유가 없다.

거의 모든 요소에 이벤트 (클릭, 호버 등)를 첨부 할 수 있으므로 a span또는 adiv ?

그리고 자바 스크립트가 비활성화 된 사용자의 경우 : 폴 백이없는 경우 (예 : 대체 href) 최소한 태그 <a>나 <span>태그에 관계없이 해당 요소를 전혀보고 상호 작용할 수 없어야합니다 .

일반적으로 JavaScript가 비활성화 된 클라이언트가 여전히 일부 기능을 사용하려면 대체 링크가 있어야합니다. 이 개념을 눈에 잘 띄지 않는 JavaScript라고합니다.

예 ... 다음과 같은 검색 링크가 있다고 가정 해 봅시다.

<a href="search.php" id="searchLink">Search</a>

언제든지 다음을 수행 할 수 있습니다.

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

이렇게하면 JavaScript를 사용하지 않는 사용자가 JavaScript를 사용 search.php하는 시청자가 향상된 기능을 보는 동안 연결됩니다.

나는 개인적으로 그것들을 조합하여 사용합니다. 예를 들면 다음과 같습니다.

HTML

<a href="#">Link</a>

약간의 jQuery와 함께

$('a[href="#"]').attr('href','javascript:void(0);');

또는

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

그러나 사용자가 빈 앵커를 클릭 할 때 페이지가 맨 위로 이동하지 못하게하기 위해 사용하고 있습니다. onHTML에서 직접 onClick 및 기타 이벤트를 거의 사용하지 않습니다 .

내 제안은 앵커 대신 속성 <span>이있는 요소 를 사용 하는 class것입니다. 예를 들면 다음과 같습니다.

<span class="link">Link</span>

그런 다음 .link본문과 </body>태그 바로 앞 또는 외부 JavaScript 문서에 래핑 된 스크립트 를 사용 하여 함수를 할당하십시오 .

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* 참고 : 동적으로 생성 된 요소의 경우 다음을 사용하십시오.

$('.link').on('click', function() {
    // do something
});

동적으로 작성된 요소로 작성된 동적으로 작성된 요소의 경우 다음을 사용하십시오.

$(document).on('click','.link', function() {
    // do something
});

그런 다음 span 요소를 CSS가 작은 앵커처럼 보이도록 스타일을 지정할 수 있습니다.

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

위 의 jsFiddle 예제는 다음과 같습니다 .

달성하려는 것에 따라 onclick을 잊고 href를 사용할 수 있습니다.

<a href="javascript:myJsFunc()">Link Text</a>

거짓을 반환해야 할 필요성을 극복합니다. #언급 한 바와 같이 옵션이 마음에 들지 않기 때문에 페이지 상단으로 사용자를 안내합니다. JavaScript를 사용하지 않는 사용자에게 보낼 다른 곳이 있다면 (이곳에서는 매우 드물지만 좋은 아이디어입니다) Steve가 제안한 방법이 훌륭합니다.

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

마지막으로, javascript:void(0)다른 사람이 가고 싶지 않고 JavaScript 함수를 호출하지 않으려는 경우 사용할 수 있습니다. 마우스 오버 이벤트가 발생하기를 원하는 이미지가 있지만 사용자가 클릭 할 것이 없으면 효과적입니다.

내가 가짜 링크를 여러 개 가질 때 나는 그들에게 '링크 없음'의 클래스를 제공하는 것을 선호합니다.

그런 다음 jQuery에서 다음 코드를 추가합니다.

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

HTML의 경우 링크는 간단합니다.

<a href="/" class="no-link">Faux-Link</a>

앵커에 사용되지 않는 한 Hash-Tag를 사용하는 것을 좋아하지 않으며 둘 이상의 가짜 링크가있을 때만 위의 작업을 수행합니다. 그렇지 않으면 javascript : void (0)로 이동합니다.

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

일반적으로 링크를 전혀 사용하지 않고 범위 내에서 무언가를 감싸고 팝업이나 내용 공개와 같은 일부 JavaScript 코드를 활성화하는 방법으로 사용하고 싶습니다.

나는 당신이 잘못된 이분법을 제시하고 있다고 생각합니다. 이것 만이 두 가지 옵션이 아닙니다.

앵커 태그를 사용하더라도 여기에 앵커가 없다고 제안한 D4V360 씨에 동의합니다. 당신이 가진 것은 약간 다르게 행동해야하는 문서의 특별한 섹션입니다. <span>태그가 훨씬 더 적합하다.

개발자 도구를 사용하여 Google 크롬에서 모두 시도했지만 id="#"0.32 초가 걸렸습니다. 이 javascript:void(0)방법은 0.18 초 밖에 걸리지 않았습니다. 따라서 Google 크롬에서는 javascript:void(0)더 빠르고 더 잘 작동합니다.

나는 기본적으로 점진적인 향상을 사용 하여이 실용적인 기사를 역설하고 있습니다. 짧은 대답은 사용하지 않을 것입니다 javascript:void(0);또는 #사용자 인터페이스가 이미 자바 스크립트 있음을 추론하지 않는 경우에 사용한다 사용 가능javascript:void(0); . 또한 span은 링크로 사용하지 마십시오. 이는 의미 상 처음부터 거짓이기 때문입니다.

응용 프로그램에서 / Home / Action / Parameters와 같은 SEO 친화적 인 URL 경로를 사용 하는 것도 좋습니다. JavaScript없이 작동하는 페이지에 대한 링크가 있으면 나중에 경험을 향상시킬 수 있습니다. 실제 페이지에 대한 실제 링크를 사용한 다음 onlick 이벤트를 추가하여 프리젠 테이션을 향상 시키십시오.

다음은 샘플입니다. Home / ChangePicture는 사용자 인터페이스와 표준 HTML 제출 버튼이 포함 된 페이지의 양식에 대한 작업 링크이지만 jQueryUI 버튼이있는 모달 대화 상자에 더 잘 삽입됩니다. 모바일 우선 개발을 만족시키는 브라우저에 따라 어느 쪽이든 작동합니다.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>